diff --git a/examples/geo/App.jsx b/examples/geo/App.jsx index 6fb5a4c..e6c8b16 100644 --- a/examples/geo/App.jsx +++ b/examples/geo/App.jsx @@ -83,7 +83,7 @@ const App = () => { placeholder={placeholder} plugins={[[recentSearchesPlugin, {ratio: 2, name: 'Recent', limit: maxItems}]]} styles={autocompleteStyles} - typeahead={false} + typeahead={true} Cancel={CancelButton} Clear={ClearButton} GroupName={GroupName} diff --git a/src/lib/__tests__/turnstone.test.jsx b/src/lib/__tests__/turnstone.test.jsx index 0f32e88..923a377 100644 --- a/src/lib/__tests__/turnstone.test.jsx +++ b/src/lib/__tests__/turnstone.test.jsx @@ -91,14 +91,13 @@ describe('Integration tests', () => { const container = screen.getByRole('combobox') const input = screen.getByPlaceholderText(placeholder) - const typeahead = container.children[1] expect(input).toBeDefined() - expect(typeahead).toBeDefined() expect(screen.queryByRole('listbox')).toBeNull() userEvent.type(screen.getByRole('textbox'), 'p') expect(await screen.findByRole('listbox')).toBeDefined() - expect(typeahead.value).toBe('Peach') + expect(container.children[1]).toBeDefined() + expect(container.children[1].value).toBe('Peach') expect(input.value).toBe('P') expect(screen.getByRole('option', { name: /peach/i }).getAttribute('aria-selected')).toBe('true') userEvent.type(screen.getByRole('textbox'), 'i', { skipClick: true }) @@ -123,6 +122,6 @@ describe('Integration tests', () => { userEvent.type(screen.getByRole('textbox'), '{backspace}', { skipClick: true }) expect(screen.queryByRole('listbox')).toBeNull() expect(input.value).toBe('') - expect(typeahead.value).toBe('') + expect(container.children[1].value).toBe('') }) }) \ No newline at end of file diff --git a/src/lib/components/__snapshots__/container.test.jsx.snap b/src/lib/components/__snapshots__/container.test.jsx.snap index 03c367e..2df8dbf 100644 --- a/src/lib/components/__snapshots__/container.test.jsx.snap +++ b/src/lib/components/__snapshots__/container.test.jsx.snap @@ -31,24 +31,5 @@ exports[`Container > Component renders correctly 1`] = ` } type="text" /> - `; diff --git a/src/lib/components/container.jsx b/src/lib/components/container.jsx index ce3959a..b6bf909 100644 --- a/src/lib/components/container.jsx +++ b/src/lib/components/container.jsx @@ -78,6 +78,8 @@ export default function Container(props) { const typeaheadInput = useRef(null) // Calculated states + console.log('hasTypeahead', typeahead, state.items.length > 1) + const hasTypeahead = typeahead && state.items.length > 1 const hasClearButton = clearButton && !!state.query const hasCancelButton = cancelButton && hasFocus const isExpanded = hasFocus && state.itemsLoaded @@ -241,7 +243,7 @@ export default function Container(props) { aria-controls={listboxId} /> - {typeahead && ( + {hasTypeahead && (