Add tabindex to list item and they can be controlled by up/down arrow.

wenzhixin · Nov 22, 2023 · 532ef65 · 532ef65
1 parent ff33413
commit 532ef65
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/src/MultipleSelect.js b/src/MultipleSelect.js
@@ -92,9 +92,9 @@ class MultipleSelect {
     let tabIndex = ''
 
     if (this.tabIndex !== null) {
-      this.$el.attr('tabindex', -1)
       tabIndex = this.tabIndex && `tabindex="${this.tabIndex}"`
     }
+    this.$el.attr('tabindex', -1)
 
     this.$choice = $(`
       <button type="button" class="ms-choice"${tabIndex}>
@@ -386,9 +386,9 @@ class MultipleSelect {
 
     if (this.options.selectAll && !this.options.single) {
       rows.push(`
-        <li class="ms-select-all">
+        <li class="ms-select-all" tabindex="0">
         <label>
-        <input type="checkbox" ${this.selectAllName}${this.allSelected ? ' checked="checked"' : ''} />
+        <input type="checkbox" ${this.selectAllName}${this.allSelected ? ' checked="checked"' : ''} tabindex="-1" />
         <span>${this.options.formatSelectAll()}</span>
         </label>
         </li>
@@ -436,6 +436,7 @@ class MultipleSelect {
           data-key="${row._key}"
           ${row.selected ? ' checked="checked"' : ''}
           ${row.disabled ? ' disabled="disabled"' : ''}
+          tabindex="-1"
         >`
 
       if (
@@ -446,7 +447,7 @@ class MultipleSelect {
       }
 
       html.push(`
-        <li class="group ${classes}" ${style}>
+        <li class="group ${classes}" ${style} tabindex="${classes.includes('hide-radio') || row.disabled ? -1 : 0}">
         <label class="optgroup${this.options.single || row.disabled ? ' disabled' : ''}">
         ${group}${row.label}
         </label>
@@ -474,14 +475,15 @@ class MultipleSelect {
     }
 
     return [`
-      <li class="${multiple} ${classes}" ${title} ${style}>
+      <li class="${multiple} ${classes}" ${title} ${style} tabindex="${row.disabled ? -1 : 0}">
       <label class="${row.disabled ? 'disabled' : ''}">
       <input type="${type}"
         value="${row.value}"
         data-key="${row._key}"
         ${this.selectItemName}
         ${row.selected ? ' checked="checked"' : ''}
         ${row.disabled ? ' disabled="disabled"' : ''}
+        tabindex="-1"
       >
       <span>${row.text}</span>
       </label>
@@ -619,6 +621,41 @@ class MultipleSelect {
 
       close()
     })
+
+    this.$ul.find('li').off('keydown').on('keydown', e => {
+      const $this = $(e.currentTarget)
+      let $divider
+      let $li
+
+      switch (e.key) {
+        case 'Tab':
+          // Do not preventDefault
+          return
+        case 'ArrowUp':
+          $divider = $this.prev('li.option-divider')
+          $li = $divider.length ? $divider : $this
+
+          $li.prev().trigger('focus')
+          break
+        case 'ArrowDown':
+          $divider = $this.next('li.option-divider')
+          $li = $divider.length ? $divider : $this
+
+          $li.next().trigger('focus')
+          break
+        case 'Enter':
+          $this.find('input').trigger('click')
+          if (this.options.single) {
+            this.$choice.trigger('focus')
+          }
+          break
+        default:
+          // ignore
+      }
+
+      e.preventDefault()
+      return false
+    })
   }
 
   initView () {
@@ -996,7 +1033,7 @@ class MultipleSelect {
       if (row.type === 'optgroup') {
         if (this.options.filterGroup) {
           const visible = this.options.customFilter({
-            label: removeDiacritics(row.label.toLowerCase()),
+            label: removeDiacritics(row.label.toString().toLowerCase()),
             search: removeDiacritics(search),
             originalLabel: row.label,
             originalSearch,
@@ -1010,7 +1047,7 @@ class MultipleSelect {
         } else {
           for (const child of row.children) {
             child.visible = this.options.customFilter({
-              text: removeDiacritics(child.text.toLowerCase()),
+              text: removeDiacritics(child.text.toString().toLowerCase()),
               search: removeDiacritics(search),
               originalText: child.text,
               originalSearch,
@@ -1022,7 +1059,7 @@ class MultipleSelect {
         }
       } else {
         row.visible = this.options.customFilter({
-          text: removeDiacritics(row.text.toLowerCase()),
+          text: removeDiacritics(row.text.toString().toLowerCase()),
           search: removeDiacritics(search),
           originalText: row.text,
           originalSearch,

diff --git a/vue-examples/src/examples/CustomFilter.vue b/vue-examples/src/examples/CustomFilter.vue
@@ -98,11 +98,11 @@ export default {
       caseSensitive: false,
       options: {
         filter: true,
-        customFilter: (label, text, originalLabel, originalText) => {
+        customFilter: ({ search, text, originalSearch, originalText }) => {
           if (this.caseSensitive) {
-            return originalLabel.indexOf(originalText) === 0
+            return originalText.indexOf(originalSearch) === 0
           }
-          return label.indexOf(text) === 0
+          return text.indexOf(search) === 0
         }
       }
     }