how to hide empty label in react-bootstrap-typeahead

Question

I'm using react-bootstrap-typeahead module in one of my application. This is working fine, except in one case.

I'm not able to submit the form if there are no results. In this case, I'm getting a disabled option with No matches found.

I used the prop emptyLabel="", which gives me a result as shown below

In both cases, when I press ESC key, this option disappears and then, I'm able to submit my form.

the desired result is to get rid of this option. Any help will be highly appreciated.

Here is my code

<form onSubmit={this.formSubmit}>
  <Typeahead
    labelKey="name"
    flip={true}
    dropup={true}
    autoFocus={true}
    options={this.state.options}
    ref={(typeahead) => this.typeahead = typeahead}
    id="qbox"
    placeholder="Type your queries here..."
    onInputChange={this.updateText}
    onBlur={(e) => this.updateText(e.target.value, e)}
    onChange={this.valueChanged}
    maxResults={5}
    minLength={5}
  />
  <button type="submit">Submit</button>
</form>

Answer 1

Hiding the menu

You'll need to add your own logic for when to render the menu, as falsy values for emptyLabel no longer hide the menu in v4. From the migration docs:

This behavior was a legacy workaround introduced before renderMenu could return null. That is no longer the case and renderMenu should now be used to achieve the behavior

You can hide the menu when there are no results by passing the following to renderMenu:

<Typeahead
  ...
  renderMenu={(results, menuProps) => {
    // Hide the menu when there are no results.
    if (!results.length) {
      return null;
    }
    return <TypeaheadMenu {...menuProps} options={results} />;
  }}
/>

Submitting the form

The typeahead blocks form submission when the menu is open to prevent inadvertent submissions. You can get around this by adding the following:

<Typeahead
  ...
  onKeyDown={(e) => {
    // Submit the form when the user hits enter.
    if (e.keyCode === 13) {
      this.form.submit();
    }
  }}
/>

Putting it all together

<form ref={(form) => this.form = form}>
  <Typeahead
    id="rbt-example"
    onKeyDown={(e) => {
      // Submit the form when the user hits enter.
      if (e.keyCode === 13) {
        this.form.submit();
      }
    }}
    options={options}
    placeholder="Type your queries here..."
    renderMenu={(results, menuProps) => {
      // Hide the menu when there are no results.
      if (!results.length) {
        return null;
      }
      return <TypeaheadMenu {...menuProps} options={results} />;
    }}
  />
  <button type="submit">Submit</button>
</form>

Live example: https://codesandbox.io/s/react-bootstrap-typeahead-rtb1s