React-bootstrap-typeahead: Re-focus input after `clear()`

[derwaldgeist]

I am using the clear() method to implement input box clearing on mobile devices, i.e. when tapping on a small "x" in a circle. It kinda works, but the fact that clear() will automatically also blur the input field feels a bit weird. I have to focus() it immediately, and this causes flickering. Thus, it would be better if clear() had an option to prevent blurring.

[ericgio]

Clicking on anything outside the input will blur the input, which seems logical to me; why is it weird? Can you point me to some examples where that isn't the case?

[derwaldgeist]

I meant the programmatical approach, i.e. calling the clear() method on the instance.

[ericgio]

when tapping on a small "x" in a circle

But clear is being triggered by a user action that blurs the input.

[derwaldgeist]

Not in my use-case. I am trying to build this, to mimic standard behaviour of a mobile text box:

If you tap on that small x, the text box will clear, but it will not blur. From the user perspective, this button is part of the text box itself.

[ericgio]

This works for me with no flickering:

<div>
  <Typeahead
    options={[...]}
    ref={(ref) => this._typeahead = ref}
  />
  <button
    onClick={() => {
      const instance = this._typeahead.getInstance();
      instance.clear();
      instance.focus();
    }}>
    Clear
  </button>
</div>

[ericgio]

As of v2.4.0, the input retains focus when _clicking_ the clear button. Note that if the button is focused via keystroke (eg: tabbing), the input will blur and won't automatically regain focus on clear.

[anupammaurya]

<div>
  <Typeahead
    options={[...]}
    ref={(ref) => this._typeahead = ref}
    onInputChange={this.onInputChangeSelection}
 />
</div>




onInputChangePartsSelection = (value) => {
    if (value) {
    const instance = this._typeahead.getInstance()
    instance.clear()
    instance.focus()
    }
  }

Get the ref in TypeAhead instance and use in onchange event call.