Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/autocomplete/__tests__/Autocomplete.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
})
})
14 changes: 8 additions & 6 deletions src/autocomplete/src/Autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down