diff --git a/src/autocomplete/__tests__/Autocomplete.test.js b/src/autocomplete/__tests__/Autocomplete.test.js index e4673994e..683ec107a 100644 --- a/src/autocomplete/__tests__/Autocomplete.test.js +++ b/src/autocomplete/__tests__/Autocomplete.test.js @@ -84,5 +84,34 @@ describe('Autocomplete', () => { expect(textInput).toHaveValue('A') }) }) + + describe('when inputvalues is object', () => { + it('should read data autocomplete', async () => { + const items = [ + { name: 'Apple', id: 1 }, + { name: 'Orange', id: 2 } + ] + + render( + makeAutocompleteFixture({ + allowOtherValues: true, + items, + itemToString: item => (item ? item.name : '') + }) + ) + + // Type 'A' into the input to filter items down containing the string + const textInput = await screen.findByTestId('TextInput') + userEvent.click(textInput) + userEvent.type(textInput, 'A') + + // Click the 'Apple' option, which should also update the input element + const item = await screen.findByText('Apple') + userEvent.click(item) + + // an object will be returned in the input without error + expect(textInput).toHaveValue('Apple') + }) + }) }) }) diff --git a/src/autocomplete/src/Autocomplete.js b/src/autocomplete/src/Autocomplete.js index e9fb47dd4..7f3bf05a2 100644 --- a/src/autocomplete/src/Autocomplete.js +++ b/src/autocomplete/src/Autocomplete.js @@ -46,7 +46,10 @@ const AutocompleteItems = ({ width }) => { itemsFilter = itemsFilter || fuzzyFilter(itemToString) - const items = isFilterDisabled || inputValue.trim() === '' ? originalItems : itemsFilter(originalItems, inputValue) + const items = + isFilterDisabled || (typeof inputValue === 'string' && inputValue.trim() === '') + ? originalItems + : itemsFilter(originalItems, inputValue) if (items.length <= 0) return null @@ -128,11 +131,10 @@ const Autocomplete = memo( } if (props.allowOtherValues && state.isOpen && !changes.isOpen) { - return { - ...changes, - selectedItem: changes.selectedItem || state.inputValue, - inputValue: changes.selectedItem || state.inputValue - } + const valueItem = changes.selectedItem || state.inputValue + return typeof valueItem === 'object' + ? { ...changes, selectedItem: valueItem } + : { ...changes, selectedItem: valueItem, inputValue: valueItem } } return changes