feat(core): add enterKeyHint prop to input

algolia · Dec 11, 2020 · 7ff2971 · 7ff2971
1 parent a695dfd
commit 7ff2971
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 0 deletions.
diff --git a/packages/autocomplete-core/src/__tests__/getInputProps.test.ts b/packages/autocomplete-core/src/__tests__/getInputProps.test.ts
@@ -249,6 +249,48 @@ describe('getInputProps', () => {
     expect(inputProps.type).toEqual('search');
   });
 
+  test('returns enterKeyHint "search" without item URL', () => {
+    const { getInputProps, inputElement } = createPlayground(
+      createAutocomplete,
+      {
+        defaultSelectedItemId: 0,
+        initialState: {
+          collections: [
+            createCollection({
+              items: [{ label: '1' }, { label: '2' }],
+            }),
+          ],
+        },
+      }
+    );
+    const inputProps = getInputProps({ inputElement });
+
+    expect(inputProps.enterKeyHint).toEqual('search');
+  });
+
+  test('returns enterKeyHint "go" with item URL', () => {
+    const { getInputProps, inputElement } = createPlayground(
+      createAutocomplete,
+      {
+        defaultSelectedItemId: 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('go');
+  });
+
   describe('onChange', () => {
     test('sets the query', () => {
       const onStateChange = jest.fn();

diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -180,6 +180,7 @@ export function getPropGetters<
 
     const isTouchDevice = 'ontouchstart' in props.environment;
     const { inputElement, maxLength = 512, ...rest } = providedProps || {};
+    const selectedItem = getSelectedItem(store.getState());
 
     return {
       'aria-autocomplete': 'both',
@@ -194,6 +195,7 @@ export function getPropGetters<
       autoComplete: 'off',
       autoCorrect: 'off',
       autoCapitalize: 'off',
+      enterKeyHint: selectedItem?.itemUrl ? 'go' : 'search',
       spellCheck: 'false',
       autoFocus: props.autoFocus,
       placeholder: props.placeholder,

diff --git a/packages/autocomplete-core/src/types/AutocompletePropGetters.ts b/packages/autocomplete-core/src/types/AutocompletePropGetters.ts
@@ -76,6 +76,7 @@ export type GetInputProps<TEvent, TMouseEvent, TKeyboardEvent> = (props: {
   autoComplete: 'on' | 'off';
   autoCorrect: 'on' | 'off';
   autoCapitalize: 'on' | 'off';
+  enterKeyHint: 'go' | 'search';
   spellCheck: 'false';
   maxLength: number;
   type: 'search';

diff --git a/packages/website/docs/prop-getters.md b/packages/website/docs/prop-getters.md
@@ -73,6 +73,7 @@ type GetInputProps = (props: {
   autoComplete: 'on' | 'off';
   autoCorrect: 'on' | 'off';
   autoCapitalize: 'on' | 'off';
+  enterKeyHint: 'go' | 'search';
   spellCheck: 'false';
   'aria-autocomplete': 'none' | 'inline' | 'list' | 'both';
   'aria-activedescendant': string | undefined;