CODEWITHSUNDEEP
react-bootstrap-typeahead
NamanD
NamanD

Reputation: 669

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

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'?

Upvotes: 3

Views: 874

Answers (1)

ericgio
ericgio

Reputation: 3509

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

Upvotes: 2

Related Questions