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

Question

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

Answer 1

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