How to use shouldSelect on Hint for React-Bootstrap-Typeahead to detect "enter" and "," keystrokes

user_5963524 0
Viewed 563

I have been trying to figure out a way to select hint on "Enter" or "," keystroke but am unable to find any documentation on it. Additionally, I get the following warning, during compilation "Warning: [react-bootstrap-typeahead] The selectHintOnEnter prop is deprecated. Use the shouldSelect prop on the Hint component to define which keystrokes can select the hint." Is there any examples on how to use the shouldSelect on 'Hint'?

react-bootstrap-typeahead
1 Answers

The shouldSelect prop has the following signature:

(shouldSelect: boolean, SyntheticKeyboardEvent<HTMLInputElement>) => boolean

You can use it to define the conditions under which the hint should be selected. In your case you'd want something like the following:

<Hint
  shouldSelect={(shouldSelect, e) => {
    // Select the hint if the user hits 'enter' or ','
    return e.keyCode === 13 || e.keyCode === 188 || shouldSelect;
  }}>
  ...
</Hint>

Here's a working example: https://codesandbox.io/s/rbt-shouldselect-example-51s7n

user_8826380
Related