fix(react): add prop adapter for downshift changes (#6427)

* fix(react): add prop adapter for downshift changes * fix(combobox): use initialSelectedItem instead of defaultSelectedItem Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 10, 2020 · 0037736 · 0037736
1 parent bb8d956
commit 0037736
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -14,6 +14,7 @@ import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { mapDownshiftProps } from '../../tools/createPropAdapter';
 
 const { prefix } = settings;
 
@@ -333,13 +334,13 @@ export default class ComboBox extends React.Component {
     const ItemToElement = itemToElement;
     return (
       <Downshift
-        {...downshiftProps}
+        {...mapDownshiftProps(downshiftProps)}
         onChange={this.handleOnChange}
         onInputValueChange={this.handleOnInputValueChange}
         onStateChange={this.handleOnStateChange}
         inputValue={this.state.inputValue || ''}
         itemToString={itemToString}
-        defaultSelectedItem={initialSelectedItem}
+        initialSelectedItem={initialSelectedItem}
         inputId={id}
         selectedItem={selectedItem}>
         {({

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -10,8 +10,9 @@ import { useSelect } from 'downshift';
 import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
+import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
+import { mapDownshiftProps } from '../../tools/createPropAdapter';
 
 const { prefix } = settings;
 
@@ -46,13 +47,13 @@ function Dropdown({
   selectedItem: controlledSelectedItem,
   downshiftProps,
 }) {
-  const selectProps = {
+  const selectProps = mapDownshiftProps({
     ...downshiftProps,
     items,
     itemToString,
     initialSelectedItem,
     onSelectedItemChange,
-  };
+  });
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -20,6 +20,7 @@ import { defaultItemToString } from './tools/itemToString';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting';
 import { defaultFilterItems } from '../ComboBox/tools/filter';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { mapDownshiftProps } from '../../tools/createPropAdapter';
 
 const { prefix } = settings;
 
@@ -321,7 +322,7 @@ export default class FilterableMultiSelect extends React.Component {
         initialSelectedItems={initialSelectedItems}
         render={({ selectedItems, onItemChange, clearSelection }) => (
           <Downshift
-            {...downshiftProps}
+            {...mapDownshiftProps(downshiftProps)}
             highlightedIndex={highlightedIndex}
             id={id}
             isOpen={isOpen}

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -18,6 +18,7 @@ import { defaultItemToString } from './tools/itemToString';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting';
 import { useSelection } from '../../internal/Selection';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { mapDownshiftProps } from '../../tools/createPropAdapter';
 
 const { prefix } = settings;
 const noop = () => {};
@@ -79,15 +80,17 @@ function MultiSelect({
     getMenuProps,
     getItemProps,
     selectedItem: selectedItems,
-  } = useSelect({
-    ...downshiftProps,
-    highlightedIndex,
-    isOpen,
-    itemToString,
-    onStateChange,
-    selectedItem: controlledSelectedItems,
-    items,
-  });
+  } = useSelect(
+    mapDownshiftProps({
+      ...downshiftProps,
+      highlightedIndex,
+      isOpen,
+      itemToString,
+      onStateChange,
+      selectedItem: controlledSelectedItems,
+      items,
+    })
+  );
 
   /**
    * programmatically control this `open` prop