The id prop will be required in future versions to make the component accessible for users of assistive technologies such as screen readers.

[Angelk90]

Version

"react-bootstrap-typeahead": "^3.4.5"

Steps to reproduce

users = [
{ 
"id": "5d08f94da9d6d25011d55e87",
"name": "Leo"
},
...
]

                  <Typeahead
                    labelKey="name"
                    options={users}
                    placeholder="Search user..."
                    onChange={this.handleChangeTy('userSelect')}
                  />

[ericgio]

You need to add an id to the component, not the options.

[Angelk90]

@ericgio , can I ask you more clarifications? You can give me an example.

[ericgio]

Hi @Angelk90, sure:

<Typeahead
  id="my-typeahead-id"
  labelKey="name"
  options={users}
  placeholder="Search user..."
  onChange={this.handleChangeTy('userSelect')}
/>

It works like the id on any normal element.

[cameron-martin]

The id prop doesn't actually get passed through to the input. It isn't in the list of props that are passed through:

react-bootstrap-typeahead/src/Typeahead.react.js

Lines 29 to 52 in 74fccbe

	const inputProps = pick(this.props, [
	'activeIndex',
	'activeItem',
	'bsSize',
	'disabled',
	'inputProps',
	'inputRef',
	'isFocused',
	'isInvalid',
	'isMenuShown',
	'isValid',
	'labelKey',
	'menuId',
	'multiple',
	'onBlur',
	'onChange',
	'onFocus',
	'onKeyDown',
	'onRemove',
	'placeholder',
	'renderToken',
	'selected',
	'text',
	]);

[ericgio]

The id prop doesn't actually get passed through to the input

That's correct. The warning doesn't refer to the input's id; it refers to an id for the typeahead component that is ultimately applied to the menu and used for accessibility. If you need to pass an id to the input itself, you would do that via inputProps.

[cameron-martin]

Why do we need to pass this ID through? The only reason I can think of is for linking the input with the dropdown, but a class name is already automatically generated for this.

What am I missing?

[ericgio]

@cameron-martin: It's used for accessibility.

[cameron-martin]

I got that, but what're you meant to link to that ID externally (from outside the component)?

[ericgio]

@cameron-martin I'm sorry, but I don't understand your question. You don't need to "link" anything, you just need to provide the id and the accessibility stuff happens internally.

[cameron-martin]

But a random id is generated automatically to use internally, so why do I need to provide one?

[ericgio]

The randomly generated id is going away in favor of an explicit, user-defined one. That change is based on what I've seen to be common practice in other libraries, with react-bootstrap being one particularly relevant case.

[cameron-martin]

Ah makes sense. There seems to be some interest in introducing a method for unique ID generation into React, particularly because the current methods do not work with both SSR & suspense. This would likely change the common practice to being generating these IDs internally. See the open RFC and PR.

[cameron-martin]

FYI, the above PR has now landed so should be available in the next version of React :)