Merge pull request #26 from github/clearselection

Avoid clearning selection on ctrlKey

Author: muan

.github/workflows/nodejs.yml

@@ -6,19 +6,19 @@ on:
     - master
 jobs:
   build:
-
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
 
     strategy:
+      fail-fast: false
       matrix:
-        node-version: [8.x, 10.x, 12.x]
+        os: [ubuntu-latest, windows-latest, macos-latest]
 
     steps:
     - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js 12.x
       uses: actions/setup-node@v1
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 12.x
     - name: npm install, build, and test
       run: |
         npm install

src/index.ts

@@ -6,6 +6,7 @@ export default class Combobox {
   input: HTMLTextAreaElement | HTMLInputElement
   keyboardEventHandler: (event: KeyboardEvent) => void
   compositionEventHandler: (event: Event) => void
+  inputHandler: (event: Event) => void
 
   constructor(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement) {
     this.input = input
@@ -20,6 +21,7 @@ export default class Combobox {
 
     this.keyboardEventHandler = event => keyboardBindings(event, this)
     this.compositionEventHandler = event => trackComposition(event, this)
+    this.inputHandler = this.clearSelection.bind(this)
     input.setAttribute('role', 'combobox')
     input.setAttribute('aria-controls', list.id)
     input.setAttribute('aria-expanded', 'false')
@@ -42,6 +44,7 @@ export default class Combobox {
     this.input.setAttribute('aria-expanded', 'true')
     this.input.addEventListener('compositionstart', this.compositionEventHandler)
     this.input.addEventListener('compositionend', this.compositionEventHandler)
+    this.input.addEventListener('input', this.inputHandler)
     ;(this.input as HTMLElement).addEventListener('keydown', this.keyboardEventHandler)
     this.list.addEventListener('click', commitWithElement)
   }
@@ -51,6 +54,7 @@ export default class Combobox {
     this.input.setAttribute('aria-expanded', 'false')
     this.input.removeEventListener('compositionstart', this.compositionEventHandler)
     this.input.removeEventListener('compositionend', this.compositionEventHandler)
+    this.input.removeEventListener('input', this.inputHandler)
     ;(this.input as HTMLElement).removeEventListener('keydown', this.keyboardEventHandler)
     this.list.removeEventListener('click', commitWithElement)
   }
@@ -95,6 +99,7 @@ export default class Combobox {
 
 function keyboardBindings(event: KeyboardEvent, combobox: Combobox) {
   if (event.shiftKey || event.metaKey || event.altKey) return
+  if (!ctrlBindings && event.ctrlKey) return
   if (combobox.isComposing) return
 
   switch (event.key) {
@@ -128,6 +133,7 @@ function keyboardBindings(event: KeyboardEvent, combobox: Combobox) {
       }
       break
     default:
+      if (event.ctrlKey) break
       combobox.clearSelection()
   }
 }

test/test.js

@@ -1,4 +1,7 @@
 import Combobox from '../dist/index.js'
+
+const ctrlBindings = !!navigator.userAgent.match(/Macintosh/)
+
 function press(input, key, ctrlKey) {
   input.dispatchEvent(new KeyboardEvent('keydown', {key, ctrlKey}))
 }
@@ -105,17 +108,17 @@ describe('combobox-nav', function() {
 
       press(input, 'Enter')
 
-      press(input, 'ArrowDown')
+      ctrlBindings ? press(input, 'n', true) : press(input, 'ArrowDown')
       assert.equal(options[2].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'r2-d2')
 
-      press(input, 'ArrowDown')
+      ctrlBindings ? press(input, 'n', true) : press(input, 'ArrowDown')
       assert.equal(options[4].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'wall-e')
       press(input, 'Enter')
       click(document.getElementById('wall-e'))
 
-      press(input, 'ArrowDown')
+      ctrlBindings ? press(input, 'n', true) : press(input, 'ArrowDown')
       assert.equal(options[5].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'link')
 
@@ -127,19 +130,18 @@ describe('combobox-nav', function() {
       assert.equal(options[0].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'baymax')
 
-      press(input, 'ArrowUp')
+      ctrlBindings ? press(input, 'p', true) : press(input, 'ArrowUp')
       assert(!list.querySelector('[aria-selected=true]'), 'Nothing should be selected')
       assert(!input.hasAttribute('aria-activedescendant'), 'Nothing should be selected')
 
-      press(input, 'ArrowDown')
-      press(input, 'ArrowDown')
-      assert.equal(options[1].getAttribute('aria-selected'), 'true')
-      assert.equal(input.getAttribute('aria-activedescendant'), 'hubot')
+      press(input, 'ArrowUp')
+      assert.equal(options[5].getAttribute('aria-selected'), 'true')
+      assert.equal(input.getAttribute('aria-activedescendant'), 'link')
 
       press(input, 'Enter')
       assert.equal(expectedTargets.length, 2)
       assert.equal(expectedTargets[0], 'hubot')
-      assert.equal(expectedTargets[1], 'hubot')
+      assert.equal(expectedTargets[1], 'link')
     })
 
     it('fires commit events on click', function() {
@@ -171,6 +173,10 @@ describe('combobox-nav', function() {
       assert.equal(options[0].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'baymax')
 
+      press(input, 'Control', true)
+      assert.equal(options[0].getAttribute('aria-selected'), 'true', 'Selection stays on modifier keydown')
+      assert.equal(input.getAttribute('aria-activedescendant'), 'baymax', 'Selection stays on modifier keydown')
+
       press(input, 'Backspace')
       assert(!list.querySelector('[aria-selected=true]'), 'Nothing should be selected')
       assert(!input.hasAttribute('aria-activedescendant'), 'Nothing should be selected')