Add enterKeyHint prop

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### 1.2.0 (24 Mar 2022)
+- Add enterKeyHint prop
+
 ### 1.1.4 (16 Mar 2022)
 - Add live demo links to README
 

README.md

@@ -265,6 +265,12 @@ in order to exit the focused state of the search box.
 - Default: `false`
 - If `true` the search box has an HTML `disabled` attribute set and cannot be interacted with by the user.
 
+#### `enterKeyHint`
+- Type: `string`
+- Default: `undefined`
+- If provided, sets the `enterkeyhint` HTML attribute of the search box `<input>` element.
+- Accepted values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, `"send"`
+
 #### `errorMessage`
 - Type: `string`
 - Default: `undefined`

examples/geo/App.jsx

@@ -73,6 +73,7 @@ const App = () => {
             debounceWait={250}
             defaultListbox={defaultListboxNoRecentSearches}
             defaultListboxIsImmutable={false}
+            enterKeyHint="search"
             errorMessage={'Sorry, something has broken!'}
             id='autocomplete'
             listbox={listbox}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "turnstone",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "React customisable autocomplete component with typeahead and grouped results from multiple APIs.",
   "author": "Tom Southall",
   "keywords": [

src/lib/components/__snapshots__/container.test.jsx.snap

@@ -16,6 +16,7 @@ exports[`Container > Component renders correctly 1`] = `
     autoCorrect="off"
     autoFocus={true}
     className="query-class"
+    enterKeyHint="search"
     id="autocomplete"
     onBlur={[Function]}
     onFocus={[Function]}

src/lib/components/container.jsx

@@ -35,6 +35,7 @@ export default function Container(props) {
     defaultListbox,
     defaultListboxIsImmutable,
     disabled,
+    enterKeyHint,
     errorMessage,
     id,
     listboxIsImmutable,
@@ -232,6 +233,7 @@ export default function Container(props) {
           autoCapitalize='off'
           spellCheck='false'
           tabIndex={tabIndex}
+          enterKeyHint={enterKeyHint}
           ref={queryInput}
           onKeyDown={checkKey}
           onInput={handleInput}

src/lib/components/container.test.jsx

@@ -33,6 +33,7 @@ describe('Container', () => {
       data: fruits,
       searchType: 'startswith',
       debounceWait: 0,
+      enterKeyHint: 'search',
       id: 'autocomplete',
       maxItems: 10,
       noItemsMessage: 'No matching fruit found',

src/lib/index.jsx

@@ -96,6 +96,7 @@ Turnstone.propTypes = {
   defaultListbox: listboxRules,
   defaultListboxIsImmutable: PropTypes.bool,
   disabled: PropTypes.bool,
+  enterKeyHint: PropTypes.oneOf(['enter', 'done', 'go', 'next', 'previous', 'search', 'send']),
   errorMessage: PropTypes.string,
   id: PropTypes.string,
   listbox: listboxRules.isRequired,