React-bootstrap-typeahead: Get `onClear` event when user clicks on ClearButton

[hyzhak]

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]

When a user clicks the clear button it will trigger onChange, but there's not specifically an onClear callback. Not sure if that's helpful for your case or not.

Btw onInputChange doesn't trigger at the moment

Works fine for me.

[hyzhak]

hm, strange because according to sources:
https://github.com/ericgio/react-bootstrap-typeahead/blob/master/src/containers/typeaheadContainer.js#L213 _handleclear calls clear() and _updateSelected(). Where clear updates state, and _updateSelected calls onChange only.

But nevertheless in my case I need specifically handle click on ClearButton. Is there any other way to make it?

[ericgio]

Yes that's right, is there something unexpected about that?

Is there any other way to make it?

There isn't a way to do it with the component's current API. You could add a listener for global click events and check if the target was the close button. Can you help me understand your use case?

[hyzhak]

Sure, we update state of the page based on typeahead input, like Google does for search page - you type something then should press Enter to get result.

But in additional to that we'd like to have a reset action on clear button. In other words when user click clear button she not only clear input field but also got initial state of the search. And I don't want to mess it with others way to clear input field (like removing text by pressing delete button)

[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).

[hyzhak]

@ericgio I've just checked this code, and it triggers when user just would select all text and remove it, but we won't like to differ this case from clear button click event

[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]

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).

I was actually wrong about this, as noted in #594. In a standard HTML search input, clicking the clear button does trigger the change event: https://codesandbox.io/s/late-resonance-g2878