fix(Dropdown): remove auto-generated ID

carbon-design-system · Jan 9, 2020 · 4894b65 · 4894b65
1 parent dd0923a
commit 4894b65
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git 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 ? (
       <span className={titleClasses}>{titleText}</span>

diff --git 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`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-0-input"
-                id="dropdown-field-label-1"
+                id="dropdown-field-label-test-dropdown"
               >
                 input
               </span>
@@ -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`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-4-input"
-                id="dropdown-field-label-5"
+                id="dropdown-field-label-test-dropdown"
               >
                 input
               </span>
@@ -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`] = `
               <span
                 className="bx--list-box__label"
                 htmlFor="downshift-3-input"
-                id="dropdown-field-label-4"
+                id="dropdown-field-label-test-dropdown"
               >
                 input
               </span>