Accessible id is not being applied correctly, cannot access element via label text

[sethreidnz]

Version

6.3.2

Steps to reproduce

I have created a reproduction repo with unit test to show the desired behaviour not passing:

https://github.com/sethreidnz/react-bootstrap-typeahead-id-not-working

Expected Behavior

I would expect if I do something like this:

<label htmlFor="typeahead">Typeahead</label>
<Typeahead id="typeahead" options={["one", "two", "three"]} isLoading={false} />

Or:

<label htmlFor="async-typeahead">Async Typeahead</label>
<AsyncTypeahead id="async-typeahead" options={["one", "two", "three"]} isLoading={false} onSearch={function (query: string): void {
  console.log(query)
} } />

That the input would have the id property applied and would be available via the label text.

Actual Behavior

The input does not have the id attribute and it is not available via the label text.

[ericgio]

Hey @sethreidnz, thanks for opening this issue. The id is applied to the menu for a11y purposes. If you need an id on the input itself, you can pass that via inputProps:

<label htmlFor="typeahead">Typeahead</label>
<Typeahead
  id="typeahead-menu"
  inputProps={{
    id: 'typeahead',
  }}
  options={["one", "two", "three"]}
/>

[sethreidnz]

Hey @sethreidnz, thanks for opening this issue. The id is applied to the menu for a11y purposes. If you need an id on the input itself, you can pass that via inputProps:

<label htmlFor="typeahead">Typeahead</label>
<Typeahead
  id="typeahead-menu"
  inputProps={{
    id: 'typeahead',
  }}
  options={["one", "two", "three"]}
/>

Okay thanks. Is the "menu" the popup that happens once you start typing? That's for the fix! To my intuition that seems a little bit backwards given I imagine most people would assume the id would be for the input the user types into. That's what happened in our codebase multiple times in any case.

[ericgio]

Yes the menu is the flyout. I can see how that might be confusing; might be something to update in a future major version.