diff --git a/CHANGELOG.md b/CHANGELOG.md index 0be26fcd1d..25b01f488c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `CreateShorthandOptions` should be typed @lucivpav ([#1886](https://github.com/stardust-ui/react/pull/1886)) - Add `shadowLevel1Dark` in Teams themes @notandrew ([#1887](https://github.com/stardust-ui/react/pull/1887)) - When merging themes use deep merge for site and component variables @miroslavstastny ([#1907](https://github.com/stardust-ui/react/pull/1907)) +- Fix `Dropdown` to properly accept `id` on `searchInput` @silviuavram ([#1938](https://github.com/stardust-ui/react/pull/1938)) ### Features - Add `TextArea` component @lucivpav ([#1897](https://github.com/stardust-ui/react/pull/1897)) diff --git a/docs/src/examples/components/Form/Usage/FormExampleDropdown.shorthand.tsx b/docs/src/examples/components/Form/Usage/FormExampleDropdown.shorthand.tsx index 68ce533458..38d95391e3 100644 --- a/docs/src/examples/components/Form/Usage/FormExampleDropdown.shorthand.tsx +++ b/docs/src/examples/components/Form/Usage/FormExampleDropdown.shorthand.tsx @@ -7,12 +7,17 @@ const fields = [ label: { content: `Your best friend's name is:`, id: labelId }, name: 'chooseFriend', key: 'choose-friend', + id: 'choose-friend-shorthand', control: { as: Dropdown, items: ['John Doe', 'Dohn Joe', 'John Joe', 'Dohn Doe'], 'aria-labelledby': labelId, search: true, placeholder: 'Choose a friend', + searchInput: { + id: 'choose-friend-shorthand', // id needs to end up on the search input. + }, + id: undefined, // not on the main wrapper element. }, }, { control: { as: Button, content: 'Submit' }, key: 'submit' }, diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index 8178b55630..4911793630 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -431,6 +431,11 @@ class Dropdown extends AutoControlledComponent, Dropdo onStateChange={this.handleStateChange} labelId={this.props['aria-labelledby']} environment={this.context.target.defaultView} + inputId={ + this.props.searchInput && this.props.searchInput['id'] + ? this.props.searchInput['id'] + : undefined + } > {({ getInputProps,