diff --git a/README.md b/README.md index a3257e3..9529542 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,7 @@ You can pass the following config options to `typeahead-standalone`: |`display(selectedItem, event?) => string`|This callback is executed when the user selects an item from the suggestions. The current suggestion/item is passed as a parameter and it **must return a string** which is set as the input's value. The 2nd *optional* parameter `event` is a Mouse/Keyboard event which can be used to track user interaction or for analytics. It defaults to `null`. |Returns the string representation of the selected item| |`tokenizer?: (words: string) => string[]`|The tokenizer function is used to split the search query and the search data by a given character(s). This function is useful when you wish to search hypenated-words or words with a certain prefix/suffix |words are split by space characters (new line, tab, spaces)| |`listScrollOptions?: ScrollIntoViewOptions`| Allows fine control over the scroll behaviour for a large list of suggestions that needs scrolling. These options are passed to the `scrollIntoView()` function. [MDN Ref](https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView) | `{ block: "nearest", inline: "nearest", behaviour: "auto"}`| +|`retainFocus`| Prevents the default tab key behavior when the list of suggestions is open. Disable this if you want to allow the default tab action to occur, for example, if you want to apply the suggestion and immediately move the focus to the next element on the page afterwards without having to press the tab key again. | `true`| --- diff --git a/demo/dev.umd.html b/demo/dev.umd.html index 99af261..04281af 100644 --- a/demo/dev.umd.html +++ b/demo/dev.umd.html @@ -181,6 +181,7 @@

Dummy input to test keyboard nav

className: 'typeahead-example', minLength: 1, limit: 10, + retainFocus: true, templates: { suggestion: (item) => { const date = item.release_date diff --git a/docs/index.html b/docs/index.html index 7dd54cb..0a255d6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -119,7 +119,8 @@
  • classNames
  • tokenizer
    • -
  • listScrollOptions
    • +
  • listScrollOptions
    • +
  • retainFocus
  • templates
    • @@ -189,6 +190,7 @@
    class="section-link">classNames
  • tokenizer
  • listScrollOptions
    • +
  • retainFocus
  • templates
    • diff --git a/docs/pages/config.html b/docs/pages/config.html index 966eede..5f1060d 100644 --- a/docs/pages/config.html +++ b/docs/pages/config.html @@ -912,6 +912,16 @@

    15. 🪙 retainFocus

    + +

    + The retainFocus config option is used to prevent the default action of the Tab key when the list of suggestions is open. + By default, when the list of suggestions is open, pressing the Tab key will select the first suggestion and stay in the input field. By pressing the Tab key again, the focus will move to the next element on the page. + When this option is set to false, pressing the Tab key will select the first suggestion and immediately move the focus to the next element on the page. + This option is set to true by default. +

    +

    15. 🎨 templates

    diff --git a/src/common.d.ts b/src/common.d.ts index c2a8a3f..8604e50 100644 --- a/src/common.d.ts +++ b/src/common.d.ts @@ -269,6 +269,11 @@ export interface typeaheadConfig { * when the list of suggestions contains many items that require scrolling. It defaults to { inline: 'nearest', block: 'nearest' } */ listScrollOptions?: ScrollIntoViewOptions; + /** + * Prevents the default tab action when the list of suggestions is open. Disable this if you want to allow the default tab action to occur. + * It defaults to true. + */ + retainFocus?: boolean; } export interface ResultSet { diff --git a/src/typeahead-standalone.ts b/src/typeahead-standalone.ts index 8a840d5..5ab85cc 100644 --- a/src/typeahead-standalone.ts +++ b/src/typeahead-standalone.ts @@ -68,6 +68,7 @@ const typeahead = (config: typeaheadConfig): typeaheadR ...(config.classNames || {}), }; const listScrollOptions: ScrollIntoViewOptions = { block: 'nearest', ...(config.listScrollOptions || {}) }; + const retainFocus = config.retainFocus === false ? false : true; // validate presence of atleast one data-source if (!local && !prefetch && !remote) throw new Error('e02'); @@ -487,7 +488,9 @@ const typeahead = (config: typeaheadConfig): typeaheadR } if (ev.key === 'Tab' && isListOpen()) { - ev.preventDefault(); + if (retainFocus) { + ev.preventDefault(); + } useSelectedValue(true); } };