feat(autocomplete-core): add enterKeyHint option to manually set hi…

…nt on virtual keyboards (#1164)
algolia · Jun 30, 2023 · e5aeea8 · e5aeea8
1 parent 739b49e
commit e5aeea8
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 2 deletions.
diff --git 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
@@ -27,6 +27,7 @@ export function getDefaultProps<TItem extends BaseItem>(
   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
@@ -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
@@ -11,6 +11,15 @@ import {
 } from './AutocompleteSource';
 import { AutocompleteState } from './AutocompleteState';
 
+export type AutocompleteEnterKeyHint =
+  | 'enter'
+  | 'done'
+  | 'go'
+  | 'next'
+  | 'previous'
+  | 'search'
+  | 'send';
+
 export interface OnSubmitParams<TItem extends BaseItem>
   extends AutocompleteScopeApi<TItem> {
   state: AutocompleteState<TItem>;
@@ -73,6 +82,12 @@ export interface AutocompleteOptions<TItem extends BaseItem> {
    * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-onstatechange
    */
   onStateChange?(props: OnStateChangeProps<TItem>): 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<TItem extends BaseItem>
   debug: boolean;
   id: string;
   onStateChange(props: OnStateChangeProps<TItem>): 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
@@ -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<TEvent, TMouseEvent, TKeyboardEvent> = (props: {
   autoComplete: 'on' | 'off';
   autoCorrect: 'on' | 'off';
   autoCapitalize: 'on' | 'off';
-  enterKeyHint: 'go' | 'search';
+  enterKeyHint: AutocompleteEnterKeyHint;
   spellCheck: 'false';
   maxLength: number;
   type: 'search';