From 05043d263c5e36bc1965847806bf1f64c4ce0e4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Tue, 14 Nov 2023 14:45:48 +0100
Subject: [PATCH] feat(Input): add clear button event "on_clear"

---
 .../docs/uilib/components/input/events.mdx    |  1 +
 .../src/components/input/Input.d.ts           |  1 +
 .../dnb-eufemia/src/components/input/Input.js |  8 +++++++
 .../components/input/__tests__/Input.test.tsx | 21 +++++++++++++++++++
 4 files changed, 31 insertions(+)

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
index 6e9db77ee65..a297aa6c7f2 100644
--- 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
index c8066f34779..ea99bef6d8a 100644
--- 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
index 7b0c5558085..2f25a3d8836 100644
--- 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
index 98339b636dd..ace564c98ab 100644
--- 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(