Merge pull request #56 from github/make-tab-optional

Make `Tab` insertion optional

Author: iansan5653

README.md

@@ -68,6 +68,18 @@ list.addEventListener('combobox-commit', function(event) {
 
 When a label is clicked on, `click` event is fired from both `<label>` and its associated input `label.control`. Since combobox does not know about the control, `combobox-commit` cannot be used as an indicator of the item's selection state.
 
+## Settings
+
+For advanced configuration, the constructor takes an optional third argument. This is a settings object with the following setting:
+
+- `tabInsertsSuggestions: boolean = true` -  Control whether the highlighted suggestion is inserted when <kbd>Tab</kbd> is pressed (<kbd>Enter</kbd> will always insert a suggestion regardless of this setting). When `true`, tab-navigation will be hijacked when open (which can have negative impacts on accessibility) but the combobox will more closely imitate a native IDE experience.
+
+For example:
+
+```js
+const combobox = new Combobox(input, list, {tabInsertsSuggestions: true})
+```
+
 ## Development
 
 ```

src/index.ts

@@ -1,3 +1,7 @@
+export type ComboboxSettings = {
+  tabInsertsSuggestions?: boolean
+}
+
 export default class Combobox {
   isComposing: boolean
   list: HTMLElement
@@ -6,10 +10,17 @@ export default class Combobox {
   compositionEventHandler: (event: Event) => void
   inputHandler: (event: Event) => void
   ctrlBindings: boolean
+  tabInsertsSuggestions: boolean
 
-  constructor(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement) {
+  constructor(
+    input: HTMLTextAreaElement | HTMLInputElement,
+    list: HTMLElement,
+    {tabInsertsSuggestions}: ComboboxSettings = {}
+  ) {
     this.input = input
     this.list = list
+    this.tabInsertsSuggestions = tabInsertsSuggestions ?? true
+
     this.isComposing = false
 
     if (!list.id) {
@@ -103,11 +114,15 @@ function keyboardBindings(event: KeyboardEvent, combobox: Combobox) {
 
   switch (event.key) {
     case 'Enter':
-    case 'Tab':
       if (commit(combobox.input, combobox.list)) {
         event.preventDefault()
       }
       break
+    case 'Tab':
+      if (combobox.tabInsertsSuggestions && commit(combobox.input, combobox.list)) {
+        event.preventDefault()
+      }
+      break
     case 'Escape':
       combobox.clearSelection()
       break