feat(Input): add clear button event "on_clear"

dnbexperience · Nov 14, 2023 · 05043d2 · 05043d2
1 parent 62411f5
commit 05043d2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/events.mdx
@@ -11,6 +11,7 @@ showTabs: true
 | `on_key_down` | _(optional)_ will be called on key down by the user. Returns `{ value, event }`.                                                                      |
 | `on_blur`     | _(optional)_ will be called on blur set by the user. Returns `{ value, event }`.                                                                      |
 | `on_submit`   | _(optional)_ will be called on submit button click. Returns `{ value, event }`.                                                                       |
+| `on_clear`    | _(optional)_ will be called on a clear button click. Returns `{ value, previousValue, event }`.                                                       |
 
 ### Manipulate the input value during typing
 

diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts
@@ -186,6 +186,7 @@ export interface InputProps
   on_submit_focus?: (...args: any[]) => any;
   on_submit_blur?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  on_clear?: (...args: any[]) => any;
 }
 export default class Input extends React.Component<InputProps, any> {
   static defaultProps: object;

diff --git a/packages/dnb-eufemia/src/components/input/Input.js b/packages/dnb-eufemia/src/components/input/Input.js
@@ -128,6 +128,7 @@ export const inputPropTypes = {
   on_submit_focus: PropTypes.func,
   on_submit_blur: PropTypes.func,
   on_state_update: PropTypes.func,
+  on_clear: PropTypes.func,
 }
 
 export default class Input extends React.PureComponent {
@@ -191,6 +192,7 @@ export default class Input extends React.PureComponent {
     on_submit_focus: null,
     on_submit_blur: null,
     on_state_update: null,
+    on_clear: null,
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -319,9 +321,15 @@ export default class Input extends React.PureComponent {
     }
   }
   clearValue = (event) => {
+    const previousValue = this.state.value
     const value = ''
     this.setState({ value })
     dispatchCustomElementEvent(this, 'on_change', { value, event })
+    dispatchCustomElementEvent(this, 'on_clear', {
+      value,
+      previousValue,
+      event,
+    })
     this._ref.current.focus({ preventScroll: true })
   }
   render() {

diff --git a/packages/dnb-eufemia/src/components/input/__tests__/Input.test.tsx b/packages/dnb-eufemia/src/components/input/__tests__/Input.test.tsx
@@ -642,7 +642,28 @@ describe('Input with clear button', () => {
         .querySelector('svg')
     ).toBeInTheDocument()
   })
+
+  it('should emit on_clear event on clear button click', () => {
+    const on_clear = jest.fn()
+    const on_change = jest.fn()
+
+    render(
+      <Input value="123" clear on_clear={on_clear} on_change={on_change} />
+    )
+
+    fireEvent.click(document.querySelector('.dnb-input__clear-button'))
+
+    expect(on_clear).toHaveBeenCalledTimes(1)
+    expect(on_clear).toHaveBeenCalledWith(
+      expect.objectContaining({ value: '', previousValue: '123' })
+    )
+    expect(on_change).toHaveBeenCalledTimes(1)
+    expect(on_change).toHaveBeenCalledWith(
+      expect.objectContaining({ value: '' })
+    )
+  })
 })
+
 describe('Input ARIA', () => {
   it('should validate with ARIA rules as a search input with a label', async () => {
     const Comp = render(