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