diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index 394bf9aacf02..1883980e9757 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -190,11 +190,10 @@ export default class Dropdown extends React.Component { [`${prefix}--label--disabled`]: disabled, }); - const helperId = !helperText - ? undefined - : `dropdown-helper-text-${this.dropdownInstanceId}`; - const labelId = `dropdown-label-${this.dropdownInstanceId}`; - const fieldLabelId = `dropdown-field-label-${this.dropdownInstanceId}`; + const helperId = + !id || !helperText ? undefined : `dropdown-helper-text-${id}`; + const labelId = `dropdown-label-${id}`; + const fieldLabelId = `dropdown-field-label-${id}`; const title = titleText ? ( {titleText} diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap index 255d463a5f68..1ac1722a87b5 100644 --- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap +++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap @@ -85,7 +85,7 @@ exports[`Dropdown should render 1`] = ` aria-disabled={false} aria-expanded={false} aria-haspopup={true} - aria-labelledby="dropdown-label-1 dropdown-field-label-1" + aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown" data-toggle={true} disabled={false} id="test-dropdown" @@ -101,7 +101,7 @@ exports[`Dropdown should render 1`] = ` aria-disabled={false} aria-expanded={false} aria-haspopup={true} - aria-labelledby="dropdown-label-1 dropdown-field-label-1" + aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown" aria-owns={null} className="bx--list-box__field" data-toggle={true} @@ -115,7 +115,7 @@ exports[`Dropdown should render 1`] = ` input @@ -260,7 +260,7 @@ exports[`Dropdown should render custom item components 1`] = ` aria-disabled={false} aria-expanded={true} aria-haspopup={true} - aria-labelledby="dropdown-label-5 dropdown-field-label-5" + aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown" data-toggle={true} disabled={false} id="test-dropdown" @@ -276,7 +276,7 @@ exports[`Dropdown should render custom item components 1`] = ` aria-disabled={false} aria-expanded={true} aria-haspopup={true} - aria-labelledby="dropdown-label-5 dropdown-field-label-5" + aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown" aria-owns="test-dropdown__menu" className="bx--list-box__field" data-toggle={true} @@ -290,7 +290,7 @@ exports[`Dropdown should render custom item components 1`] = ` input @@ -594,7 +594,7 @@ exports[`Dropdown should render with strings as items 1`] = ` aria-disabled={false} aria-expanded={true} aria-haspopup={true} - aria-labelledby="dropdown-label-4 dropdown-field-label-4" + aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown" data-toggle={true} disabled={false} id="test-dropdown" @@ -610,7 +610,7 @@ exports[`Dropdown should render with strings as items 1`] = ` aria-disabled={false} aria-expanded={true} aria-haspopup={true} - aria-labelledby="dropdown-label-4 dropdown-field-label-4" + aria-labelledby="dropdown-label-test-dropdown dropdown-field-label-test-dropdown" aria-owns="test-dropdown__menu" className="bx--list-box__field" data-toggle={true} @@ -624,7 +624,7 @@ exports[`Dropdown should render with strings as items 1`] = ` input