fix(dropdown): revert id change to have stable identifier (#4935)

Co-authored-by: Akira Sudoh <[email protected]>
carbon-design-system · Jan 6, 2020 · a506f76 · a506f76
1 parent 90feb07
commit a506f76
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -13,7 +13,6 @@ import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
 
@@ -25,8 +24,6 @@ const defaultItemToString = item => {
   return item ? item.label : '';
 };
 
-const getInstanceId = setupGetInstanceId();
-
 export default class Dropdown extends React.Component {
   static propTypes = {
     /**
@@ -152,10 +149,6 @@ export default class Dropdown extends React.Component {
     helperText: '',
   };
 
-  constructor(props) {
-    super(props);
-    this.dropdownInstanceId = getInstanceId();
-  }
   handleOnChange = selectedItem => {
     if (this.props.onChange) {
       this.props.onChange({ selectedItem });
@@ -197,10 +190,8 @@ export default class Dropdown extends React.Component {
       [`${prefix}--label--disabled`]: disabled,
     });
 
-    const dropdownId = `dropdown-${this.dropdownInstanceId}`;
-
     const title = titleText ? (
-      <label htmlFor={dropdownId} className={titleClasses}>
+      <label htmlFor={id} className={titleClasses}>
         {titleText}
       </label>
     ) : null;
@@ -247,7 +238,7 @@ export default class Dropdown extends React.Component {
             <ListBox
               type={type}
               size={size}
-              id={dropdownId}
+              id={id}
               aria-label={ariaLabel}
               className={className({ isOpen })}
               disabled={disabled}
@@ -286,7 +277,7 @@ export default class Dropdown extends React.Component {
                 />
               </ListBox.Field>
               {isOpen && (
-                <ListBox.Menu aria-labelledby={dropdownId} id={id}>
+                <ListBox.Menu aria-labelledby={id} id={id}>
                   {items.map((item, index) => (
                     <ListBox.MenuItem
                       key={itemToString(item)}

diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -67,15 +67,15 @@ exports[`Dropdown should render 1`] = `
       <ListBox
         className="bx--dropdown"
         disabled={false}
-        id="dropdown-1"
+        id="test-dropdown"
         innerRef={[Function]}
         isOpen={false}
         light={false}
         type="default"
       >
         <div
           className="bx--dropdown bx--list-box"
-          id="dropdown-1"
+          id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
           role="listbox"
@@ -242,15 +242,15 @@ exports[`Dropdown should render custom item components 1`] = `
       <ListBox
         className="bx--dropdown bx--dropdown--open"
         disabled={false}
-        id="dropdown-5"
+        id="test-dropdown"
         innerRef={[Function]}
         isOpen={true}
         light={false}
         type="default"
       >
         <div
           className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
-          id="dropdown-5"
+          id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
           role="listbox"
@@ -344,11 +344,11 @@ exports[`Dropdown should render custom item components 1`] = `
             </div>
           </ListBoxField>
           <ListBoxMenu
-            aria-labelledby="dropdown-5"
+            aria-labelledby="test-dropdown"
             id="test-dropdown"
           >
             <div
-              aria-labelledby="dropdown-5"
+              aria-labelledby="test-dropdown"
               className="bx--list-box__menu"
               id="test-dropdown__menu"
               role="listbox"
@@ -576,15 +576,15 @@ exports[`Dropdown should render with strings as items 1`] = `
       <ListBox
         className="bx--dropdown bx--dropdown--open"
         disabled={false}
-        id="dropdown-4"
+        id="test-dropdown"
         innerRef={[Function]}
         isOpen={true}
         light={false}
         type="default"
       >
         <div
           className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
-          id="dropdown-4"
+          id="test-dropdown"
           onClick={[Function]}
           onKeyDown={[Function]}
           role="listbox"
@@ -678,11 +678,11 @@ exports[`Dropdown should render with strings as items 1`] = `
             </div>
           </ListBoxField>
           <ListBoxMenu
-            aria-labelledby="dropdown-4"
+            aria-labelledby="test-dropdown"
             id="test-dropdown"
           >
             <div
-              aria-labelledby="dropdown-4"
+              aria-labelledby="test-dropdown"
               className="bx--list-box__menu"
               id="test-dropdown__menu"
               role="listbox"