Ids are not passing through to HTML elements

[JustinB-dev]

Version

3.4.7
Using this version in production app, tested on most current versions as well

Steps to reproduce

Add an id to typeahead component. ex:
Load onto browser.
Verify typeahead is present.
Inspect element - id should be present but is not.
Verified that they are not showing up in sandbox either

Expected Behavior

Ids passed into Typeahead should appear on HTML elements when inspecting in browser.

Actual Behavior

Ids are not showing up.

[ericgio]

Hi @JustinB-dev, thanks for filing this issue. I'm not sure I totally understand your question, but it sounds like you're expecting the id to be passed down to the input, is that right? If so, that isn't the way the top-level id prop works. It's ultimately passed down to the menu for accessibility purposes. If you need to add an id to the input, you should use inputProps.

[JustinB-dev]

<td>
  <Typeahead
    id="user-account-typeahead"
    options={this.accounts}
    defaultSelected={this.selectedAccounts}
    clearButton
    onChange={this.onAccountChange}
    className="typeahead-field"
    searchable
    multiple={this.shouldDisplayAccounts || this.selectedAccounts.length > 1}
  />
</td>

So this is the code that we are using, and the className is coming through to the div, but the id is not.

[ericgio]

Yes, that's the expected behavior.

[JustinB-dev]

Using inputProps={{id: 'test-typeahead-id'}} does not work either. Based on the docs, it should be a bug, no?

[ericgio]

Using inputProps={{id: 'test-typeahead-id'}} does not work either.

Using inputProps allows you to pass an id to the input element, not the top-level div.

Based on the docs, it should be a bug, no?

It's not a bug, though perhaps the docs could be clearer. What is your use-case?

[JustinB-dev]

From the screenshot inspecting the elements the typeahead comes through as a div, and I am trying to get an id attribute onto that div.

[ericgio]

There's no way to add an id to the top-level div. Why do you need to do that?

[JustinB-dev]

Our specific use case is for our QA Team trying to run automation and running into trouble with these specific fields.
Also, it is a field that can determine some important information, so we want to be sure that it is accessible by screen readers.

We found a work-around with adding another wrapper and putting the id tag there, but figured I could bring it to your attention. The only reason I thought it may be a bug is because the className is able to pass through to the top level, but the id isn't.

[ericgio]

Also, it is a field that can determine some important information, so we want to be sure that it is accessible by screen readers

Note that the div itself is not intended to be accessible; the input and menu are the relevant elements for screen readers. That's great you were able to find a workaround that meets your needs, however. I'll consider this issue resolved.