diff --git a/packages/autocomplete-core/src/__tests__/getInputProps.test.ts b/packages/autocomplete-core/src/__tests__/getInputProps.test.ts index e21b6f11f..23befd84d 100644 --- a/packages/autocomplete-core/src/__tests__/getInputProps.test.ts +++ b/packages/autocomplete-core/src/__tests__/getInputProps.test.ts @@ -293,6 +293,30 @@ describe('getInputProps', () => { expect(inputProps.enterKeyHint).toEqual('go'); }); + test('returns enterKeyHint "enter" when explicitly defined', () => { + const { getInputProps, inputElement } = createPlayground( + createAutocomplete, + { + enterKeyHint: 'enter', + defaultActiveItemId: 0, + initialState: { + collections: [ + createCollection({ + source: { getItemUrl: ({ item }) => item.url }, + items: [ + { label: '1', url: '#1' }, + { label: '2', url: '#2' }, + ], + }), + ], + }, + } + ); + const inputProps = getInputProps({ inputElement }); + + expect(inputProps.enterKeyHint).toEqual('enter'); + }); + describe('onChange', () => { test('sets the query', () => { const onStateChange = jest.fn(); diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts index c5507edee..9ea0c1827 100644 --- a/packages/autocomplete-core/src/getDefaultProps.ts +++ b/packages/autocomplete-core/src/getDefaultProps.ts @@ -27,6 +27,7 @@ export function getDefaultProps( return { debug: false, openOnFocus: false, + enterKeyHint: undefined, placeholder: '', autoFocus: false, defaultActiveItemId: null, diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts index 7135bce64..0ac247456 100644 --- a/packages/autocomplete-core/src/getPropGetters.ts +++ b/packages/autocomplete-core/src/getPropGetters.ts @@ -173,7 +173,8 @@ export function getPropGetters< const userAgent = props.environment.navigator?.userAgent || ''; const shouldFallbackKeyHint = isSamsung(userAgent); const enterKeyHint = - activeItem?.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search'; + props.enterKeyHint || + (activeItem?.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search'); return { 'aria-autocomplete': 'both', diff --git a/packages/autocomplete-shared/src/core/AutocompleteOptions.ts b/packages/autocomplete-shared/src/core/AutocompleteOptions.ts index cbbc39dab..918b979a4 100644 --- a/packages/autocomplete-shared/src/core/AutocompleteOptions.ts +++ b/packages/autocomplete-shared/src/core/AutocompleteOptions.ts @@ -11,6 +11,15 @@ import { } from './AutocompleteSource'; import { AutocompleteState } from './AutocompleteState'; +export type AutocompleteEnterKeyHint = + | 'enter' + | 'done' + | 'go' + | 'next' + | 'previous' + | 'search' + | 'send'; + export interface OnSubmitParams extends AutocompleteScopeApi { state: AutocompleteState; @@ -73,6 +82,12 @@ export interface AutocompleteOptions { * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-onstatechange */ onStateChange?(props: OnStateChangeProps): void; + /** + * The action label or icon to present for the enter key on virtual keyboards. + * + * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-enterkeyhint + */ + enterKeyHint?: AutocompleteEnterKeyHint; /** * The placeholder text to show in the search input when there's no query. * @@ -184,6 +199,7 @@ export interface InternalAutocompleteOptions debug: boolean; id: string; onStateChange(props: OnStateChangeProps): void; + enterKeyHint: AutocompleteEnterKeyHint | undefined; placeholder: string; autoFocus: boolean; defaultActiveItemId: number | null; diff --git a/packages/autocomplete-shared/src/core/AutocompletePropGetters.ts b/packages/autocomplete-shared/src/core/AutocompletePropGetters.ts index 6750a850b..3b84b410f 100644 --- a/packages/autocomplete-shared/src/core/AutocompletePropGetters.ts +++ b/packages/autocomplete-shared/src/core/AutocompletePropGetters.ts @@ -1,4 +1,5 @@ import { BaseItem } from './AutocompleteApi'; +import { AutocompleteEnterKeyHint } from './AutocompleteOptions'; import { InternalAutocompleteSource } from './AutocompleteSource'; export interface AutocompletePropGetters< @@ -76,7 +77,7 @@ export type GetInputProps = (props: { autoComplete: 'on' | 'off'; autoCorrect: 'on' | 'off'; autoCapitalize: 'on' | 'off'; - enterKeyHint: 'go' | 'search'; + enterKeyHint: AutocompleteEnterKeyHint; spellCheck: 'false'; maxLength: number; type: 'search';