fix(Input): Call onChange on clear

CHANGELOG.md

@@ -34,6 +34,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Expose `Popup`'s content Ref @sophieH29 ([#913](https://github.com/stardust-ui/react/pull/913))
 - Fix `Button` Teams theme styles to use semibold weight @notandrew ([#829](https://github.com/stardust-ui/react/pull/829))
 - Fix conflicts of generated names in Fela with FontAwesome @layershifter ([#951](https://github.com/stardust-ui/react/pull/951))
+- Fix handleOnClear of Input by calling onChange callback when cleared @pajindal([#957](https://github.com/stardust-ui/react/pull/957))
+
 
 ### Documentation
 - Add `Editable Area with Dropdown` prototype for mentioning people using `@` character (only available in development mode) @Bugaa92 ([#931](https://github.com/stardust-ui/react/pull/931))

packages/react/src/components/Input/Input.tsx

@@ -176,7 +176,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
 
   private handleIconOverrides = predefinedProps => ({
     onClick: (e: React.SyntheticEvent) => {
-      this.handleOnClear()
+      this.handleOnClear(e)
       this.inputRef.current.focus()
       _.invoke(predefinedProps, 'onClick', e, this.props)
     },
@@ -191,9 +191,13 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     this.trySetState({ value })
   }
 
-  private handleOnClear = () => {
+  private handleOnClear = (e: React.SyntheticEvent) => {
     if (this.props.clearable) {
-      this.trySetState({ value: '' })
+      const value = ''
+
+      _.invoke(this.props, 'onChange', e, { ...this.props, value })
+
+      this.trySetState({ value })
     }
   }