react-bootstrap-typeahead | React typeahead with Bootstrap | Frontend Framework library

I am using react-bootstrap-typeahead version 5.2.1 with onSearch method to handle async typeahead search. The issue is when user types a long number(eg: 99999180) very slowly or stop typing after 999999 then continue typing 180(you can see the sequence from the network), we cannot get the returned results as the query parameter shows 9999918 only. However, 999999180 does exists in the database. The same codes are working fine with same scenario based on the old react-bootstrap-typeahead version 3.4.7. Not quite sure this is a defect for version 5.2.1? thanks in advance.

In the onChange of React-Bootstrap-Typeahead, I need to manually set a custom display value. My first thought was to use a ref and do something similar to the .clear() in this example.

But although .clear() works, inputNode.value = 'abc' does not work, and I'm left with the old selected value from the menu.

I need a way to identify in react-bootstrap-typeahead whether after a selection someone has started typing, which makes the selected value invalid. The only valid value is after a click-selection from the prompts. Otherwise for any keyboard modifications, I need to flag this and pass an error condition to my outer form (Formik's values), to immediately show an error.

I wanted to make onInputChange set a blank value because any post-selection typing is always invalid. But that completely blocked all options for me as I start typing. I need to keep the option-matching, but just set the value to NULL so that Formik/React-Bootstrap can flag it is invalid and show an error immediately. (Also, before the first click-selection ("first typing"), it's OK not to flag it.)

I am trying to build a simple frontend page with react bootstrap typeahead library, import from CDN.

Here is the partial code for the frontend:

In my React-Bootstrap-Typeahead I need to set a state var and clear in the input immediately to allow new searches. What's happening now is:

1. A list of suggestions is presented
2. When I select a menu item, my handleChange is executed correctly
3. The selection is shown in the text field.

I need to set the var clickedSelection and reset the input for new searches. Everything should be cleared and closed. (Note: I'm using the AsyncTypeahead variation of React-Bootstrap-Typeahead .)

So I'm using react-bootstrap-typeahead and it's working completely fine when I'm typing something in the search box. It gives me the relevant options when I type something in the search box like this:

However, when I select one of options and then try to re-change the text it throws an error. This is how it looks like when I select 1 option.

And this is the error it throws: TypeError: 'Cannot read property 'match' of undefined'

Here is the state of the Search component which has the Typeahead:

using formik and react-bootstrap-typeahead, I am having 2 typeaheads inside formik

What i am trying to do is, I have 2 typeaheads, depending on the option selected from typeahead-1, I'm getting the options for the typeahead-2 and it works absolutely wonderful

Hello I'm trying to create a react bootstrap typeahead in which I can update my input text from javascript. It works in console but doesn't work in code.

Using react-bootstrap-typeahead there is an option to provide placeholder text.

How can I change the color of this text? I can't find the relevant selector to target the placeholder text element on the demo page: