fix(dropdown,multiselect): add support for refs on buttons (#6441)

Co-authored-by: Alessandra Davila <[email protected]>
carbon-design-system · Jul 14, 2020 · 2485371 · 2485371
1 parent cc8d771
commit 2485371
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 50 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2146,6 +2146,7 @@ Map {
     },
   },
   "Dropdown" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
       "direction": "bottom",
       "disabled": false,
@@ -2156,6 +2157,7 @@ Map {
       "titleText": "",
       "type": "default",
     },
+    "displayName": "Dropdown",
     "propTypes": Object {
       "ariaLabel": Object {
         "type": "string",
@@ -2285,6 +2287,7 @@ Map {
         "type": "oneOf",
       },
     },
+    "render": [Function],
   },
   "ErrorBoundary" => Object {
     "contextType": Object {
@@ -3251,6 +3254,7 @@ Map {
     },
   },
   "MultiSelect" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "Filterable": Object {
       "defaultProps": Object {
         "ariaLabel": "Choose an item",
@@ -3481,6 +3485,7 @@ Map {
       "title": false,
       "type": "default",
     },
+    "displayName": "MultiSelect",
     "propTypes": Object {
       "compareItems": Object {
         "isRequired": true,
@@ -3696,6 +3701,7 @@ Map {
         "type": "bool",
       },
     },
+    "render": [Function],
   },
   "ToastNotification" => Object {
     "defaultProps": Object {

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -24,29 +24,32 @@ const defaultItemToString = (item) => {
   return item ? item.label : '';
 };
 
-function Dropdown({
-  className: containerClassName,
-  disabled,
-  direction,
-  items,
-  label,
-  ariaLabel,
-  itemToString,
-  itemToElement,
-  type,
-  size,
-  onChange,
-  id,
-  titleText,
-  helperText,
-  translateWithId,
-  light,
-  invalid,
-  invalidText,
-  initialSelectedItem,
-  selectedItem: controlledSelectedItem,
-  downshiftProps,
-}) {
+const Dropdown = React.forwardRef(function Dropdown(
+  {
+    className: containerClassName,
+    disabled,
+    direction,
+    items,
+    label,
+    ariaLabel,
+    itemToString,
+    itemToElement,
+    type,
+    size,
+    onChange,
+    id,
+    titleText,
+    helperText,
+    translateWithId,
+    light,
+    invalid,
+    invalidText,
+    initialSelectedItem,
+    selectedItem: controlledSelectedItem,
+    downshiftProps,
+  },
+  ref
+) {
   const selectProps = mapDownshiftProps({
     ...downshiftProps,
     items,
@@ -134,6 +137,7 @@ function Dropdown({
           <WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
         )}
         <button
+          ref={ref}
           className={`${prefix}--list-box__field`}
           disabled={disabled}
           aria-disabled={disabled}
@@ -174,8 +178,9 @@ function Dropdown({
       {!inline && !invalid && helper}
     </div>
   );
-}
+});
 
+Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   /**
    * Disable the control

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -34,31 +34,34 @@ const {
   ToggleButtonClick,
 } = useSelect.stateChangeTypes;
 
-function MultiSelect({
-  className: containerClassName,
-  id,
-  items,
-  itemToString,
-  titleText,
-  helperText,
-  label,
-  type,
-  size,
-  disabled,
-  initialSelectedItems,
-  sortItems,
-  compareItems,
-  light,
-  invalid,
-  invalidText,
-  useTitleInItem,
-  translateWithId,
-  downshiftProps,
-  open,
-  selectionFeedback,
-  onChange,
-  direction,
-}) {
+const MultiSelect = React.forwardRef(function MultiSelect(
+  {
+    className: containerClassName,
+    id,
+    items,
+    itemToString,
+    titleText,
+    helperText,
+    label,
+    type,
+    size,
+    disabled,
+    initialSelectedItems,
+    sortItems,
+    compareItems,
+    light,
+    invalid,
+    invalidText,
+    useTitleInItem,
+    translateWithId,
+    downshiftProps,
+    open,
+    selectionFeedback,
+    onChange,
+    direction,
+  },
+  ref
+) {
   const { current: multiSelectInstanceId } = useRef(getInstanceId());
   const [highlightedIndex, setHighlightedIndex] = useState(null);
   const [isOpen, setIsOpen] = useState(open);
@@ -192,6 +195,7 @@ function MultiSelect({
           <WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
         )}
         <button
+          ref={ref}
           className={`${prefix}--list-box__field`}
           disabled={disabled}
           aria-disabled={disabled}
@@ -247,8 +251,9 @@ function MultiSelect({
       )}
     </div>
   );
-}
+});
 
+MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
   ...sortingPropTypes,