diff --git a/src/core/Form/Combobox/Combobox/Combobox.md b/src/core/Form/Combobox/Combobox/Combobox.md index f73d188d0..0c3c002ec 100644 --- a/src/core/Form/Combobox/Combobox/Combobox.md +++ b/src/core/Form/Combobox/Combobox/Combobox.md @@ -6,57 +6,66 @@ const tools = [ name: 'Jackhammer', price: 230, tax: false, - labelText: 'Jackhammer' + labelText: 'Jackhammer', + uniqueItemId: 'jh2435626' }, { name: 'Hammer', price: 15, tax: true, - labelText: 'Hammer' + labelText: 'Hammer', + uniqueItemId: 'h9823523' }, { name: 'Sledgehammer', price: 36, tax: false, - labelText: 'Sledgehammer' + labelText: 'Sledgehammer', + uniqueItemId: 'sh908293482' }, { name: 'Spade', price: 50, tax: true, - labelText: 'Spade' + labelText: 'Spade', + uniqueItemId: 's82502335' }, { name: 'Powersaw', price: 150, tax: false, labelText: 'Powersaw', - disabled: true + disabled: true, + uniqueItemId: 'ps9081231' }, { name: 'Shovel', price: 115, tax: true, - labelText: 'Shovel' + labelText: 'Shovel', + uniqueItemId: 's05111511' }, { name: 'Iron stick', price: 85, tax: false, - labelText: 'Iron stick' + labelText: 'Iron stick', + uniqueItemId: 'is3451261' }, { name: 'Rake', price: 50, tax: true, - labelText: 'Rake' + labelText: 'Rake', + uniqueItemId: 'r09282626' }, { name: 'Motorsaw', price: 450, tax: false, labelText: 'Motorsaw', - disabled: true + disabled: true, + uniqueItemId: 'ms6126266' } ]; @@ -65,14 +74,16 @@ const defaultSelectedTools = [ name: 'Hammer', price: 15, tax: true, - labelText: 'Hammer' + labelText: 'Hammer', + uniqueItemId: 'h9823523' }, { name: 'Powersaw', price: 150, tax: false, labelText: 'Powersaw', - disabled: true + disabled: true, + uniqueItemId: 'ps9081231' } ]; diff --git a/src/core/Form/Combobox/Combobox/Combobox.tsx b/src/core/Form/Combobox/Combobox/Combobox.tsx index f6d8fa2a2..725d39a0c 100644 --- a/src/core/Form/Combobox/Combobox/Combobox.tsx +++ b/src/core/Form/Combobox/Combobox/Combobox.tsx @@ -28,6 +28,8 @@ export interface ComboboxData { chipText?: string; /** Item selection disabled for the user */ disabled?: boolean; + /** Unique id to identify the item */ + uniqueItemId: string; } export interface ComboboxProps { @@ -87,7 +89,7 @@ function getSelectedKeys(items: (T & ComboboxData)[]): SelectedItemKeys { const selectedKeys: SelectedItemKeys = {}; // eslint-disable-next-line no-restricted-syntax for (const item of items) { - selectedKeys[item.labelText] = false; + selectedKeys[item.uniqueItemId] = false; } return selectedKeys; } @@ -135,10 +137,10 @@ class BaseCombobox extends Component> { const { selectedKeys, selectedItems } = prevState; const newSelectedKeys = Object.assign({}, selectedKeys); if (!item.disabled) { - if (item.labelText in newSelectedKeys) { - delete newSelectedKeys[item.labelText]; + if (item.uniqueItemId in newSelectedKeys) { + delete newSelectedKeys[item.uniqueItemId]; const newSelectedItems = selectedItems.filter( - (selectedItem) => selectedItem.labelText !== item.labelText, + (selectedItem) => selectedItem.uniqueItemId !== item.uniqueItemId, ); if (onItemSelectionsChange) { onItemSelectionsChange(newSelectedItems); @@ -148,7 +150,7 @@ class BaseCombobox extends Component> { selectedItems: newSelectedItems, }; } - newSelectedKeys[item.labelText] = false; + newSelectedKeys[item.uniqueItemId] = false; const newSelectedItems = selectedItems.concat([item]); if (onItemSelectionsChange) { onItemSelectionsChange(newSelectedItems); @@ -176,7 +178,7 @@ class BaseCombobox extends Component> { for (const item of selectedItems) { if (item.disabled) { disabledItems.push(item); - newSelectedKeys[item.labelText] = false; + newSelectedKeys[item.uniqueItemId] = false; } } if (onItemSelectionsChange) { @@ -207,7 +209,7 @@ class BaseCombobox extends Component> { const handleKeyDown = (event: React.KeyboardEvent) => { const { filteredItems: items, currentSelection } = this.state; const index = items.findIndex( - ({ labelText: uniqueText }) => uniqueText === currentSelection, + ({ uniqueItemId }) => uniqueItemId === currentSelection, ); const getNextIndex = () => (index + 1) % items.length; @@ -248,8 +250,8 @@ class BaseCombobox extends Component> { focusToMenu(); const nextItem = getNextItem(); if (nextItem) { - this.setState({ currentSelection: nextItem.labelText }); - scrollItemList(nextItem.labelText); + this.setState({ currentSelection: nextItem.uniqueItemId }); + scrollItemList(nextItem.uniqueItemId); } break; } @@ -259,8 +261,8 @@ class BaseCombobox extends Component> { focusToMenu(); const previousItem = getPreviousItem(); if (previousItem) { - this.setState({ currentSelection: previousItem.labelText }); - scrollItemList(previousItem.labelText); + this.setState({ currentSelection: previousItem.uniqueItemId }); + scrollItemList(previousItem.uniqueItemId); } break; } @@ -269,7 +271,7 @@ class BaseCombobox extends Component> { event.preventDefault(); if (currentSelection) { const currentItem = items.find( - ({ labelText: uniqueText }) => uniqueText === currentSelection, + ({ uniqueItemId }) => uniqueItemId === currentSelection, ); if (currentItem) { this.handleItemSelection(currentItem); @@ -441,16 +443,16 @@ class BaseCombobox extends Component> { {filteredItems.length > 0 ? ( filteredItems.map((item) => { const isCurrentlySelected = - item.labelText === currentSelection; + item.uniqueItemId === currentSelection; return ( { focusToMenu(); @@ -476,7 +478,7 @@ class BaseCombobox extends Component> { {selectedItems.map((item) => ( this.handleItemSelection(item)}