diff --git a/CHANGELOG.md b/CHANGELOG.md index fc8a444..04ffe2b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 61288b3..6d1b21c 100644 --- a/README.md +++ b/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 `` element. +- Accepted values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, `"send"` + #### `errorMessage` - Type: `string` - Default: `undefined` diff --git a/examples/geo/App.jsx b/examples/geo/App.jsx index 57aba39..aa08f41 100644 --- a/examples/geo/App.jsx +++ b/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} diff --git a/package.json b/package.json index e10489a..0fd12d8 100644 --- a/package.json +++ b/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": [ diff --git a/src/lib/components/__snapshots__/container.test.jsx.snap b/src/lib/components/__snapshots__/container.test.jsx.snap index 15ac052..9ed00d9 100644 --- a/src/lib/components/__snapshots__/container.test.jsx.snap +++ b/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]} diff --git a/src/lib/components/container.jsx b/src/lib/components/container.jsx index c57bae7..6fc9965 100644 --- a/src/lib/components/container.jsx +++ b/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} diff --git a/src/lib/components/container.test.jsx b/src/lib/components/container.test.jsx index d416fa6..fd98f62 100644 --- a/src/lib/components/container.test.jsx +++ b/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', diff --git a/src/lib/index.jsx b/src/lib/index.jsx index a3f4f5e..0b8940c 100644 --- a/src/lib/index.jsx +++ b/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,