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 <andreancardona@gmail.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> 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