Get `onClear` event when user clicks on ClearButton

In there any way to get onClear event when user click on ClearButton inside of Typehead? We need to run special actions in that case. Btw onInputChange doesn’t trigger at the moment. Is it expected behaviour? But even if it would work it doesn’t help there because I need to differ case when user clear text by clicking specifically ClearButton.

[ericgio]

Not sure why I didn’t think about this before, but you can customize the clear button (and click handler) using a child render prop:

<Typeahead ... >
  {({ onClear }) => (
    <ClearButton
      onClick={(e) => {
        onClear();
        // Add additional code to the handler...
      }}
    />
  )}
</Typeahead>

Here’s a working example: https://codesandbox.io/s/rbt-onclear-example-osw2e

[ericgio]

I see, thanks for the explanation. It certainly seems like a dedicated onClear event would be the easiest thing, and it wouldn’t be hard to add. I guess my concern is the overhead of an additional prop and whether or not it’s generally useful. One workaround for you in the short-term would be to check the input’s value (which it sounds like you were trying to do before):

<Typeahead
  ...
  clearButton
  onChange={selected => {
    const input = this._typeahead.getInstance().getInput();
    if (!selected.length && !input.value) {
      // Clear button was clicked, do some stuff...
    }
  }}
  ref={typeahead => this._typeahead = typeahead}
/>

By the way, I now understand why onInputChange wasn’t working for you: it doesn’t get called when the clear button is clicked, only when the user actually modifies the value in the input directly. That probably seems weird, but it’s consistent with how an input works (ie: the onChange event doesn’t fire when value is changed programmatically).