fix constant option remove/append bug, fix label styling

w3c · Nov 14, 2019 · ccd56b7 · ccd56b7
1 parent d2f0e5a
commit ccd56b7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 41 deletions.
diff --git a/examples/combobox/combobox-autocomplete-list.html b/examples/combobox/combobox-autocomplete-list.html
@@ -49,8 +49,8 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
       <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
+        <label for="cb1-input">State</label>
         <div class="combobox combobox-list">
-          <label for="cb1-input">State</label>
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
               aria-expanded="false" aria-controls="cb1-listbox">

diff --git a/examples/combobox/combobox-autocomplete-none.html b/examples/combobox/combobox-autocomplete-none.html
@@ -47,8 +47,8 @@ <h1>Editable Combobox without Autocomplete Example</h1>
       <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
+        <label for="cb1-input">Search</label>
         <div class="combobox combobox-list">
-          <label for="cb1-input">Search</label>
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text"
                    role="combobox"

diff --git a/examples/combobox/js/combobox-list.js b/examples/combobox/js/combobox-list.js
@@ -222,8 +222,7 @@ ComboboxList.prototype.handleKeydown = function (event) {
 };
 
 ComboboxList.prototype.handleKeyup = function (event) {
-  var tgt = event.currentTarget,
-    flag = false,
+  var flag = false,
     option = false,
     char = event.key;
 
@@ -276,50 +275,77 @@ ComboboxList.prototype.handleKeyup = function (event) {
         this.setVisualFocusTextbox();
         this.listbox.setCurrentOptionStyle(false);
         flag = true;
-      }
-
-      break;
-  }
 
-  if (event.keyCode !== this.keyCode.RETURN) {
-
-    if (this.isList || this.isBoth) {
-      option = this.listbox.filterOptions(this.filter, this.option);
-      if (option) {
-        if (this.listbox.isClosed()) {
-          if (this.domNode.value.length) {
-            this.listbox.open();
-          }
-        }
-
-        if (option.textComparison.indexOf(this.domNode.value.toLowerCase()) === 0) {
-          this.option = option;
-          if (this.isBoth || this.listbox.hasFocus) {
-            this.listbox.setCurrentOptionStyle(option);
-            if (this.isBoth && isPrintableCharacter(char)) {
-              this.setOption(option);
+        if (this.isList || this.isBoth) {
+          option = this.listbox.filterOptions(this.filter, this.option);
+          if (option) {
+            if (this.listbox.isClosed() && this.domNode.value.length) {
+              this.listbox.open();
+            }
+
+            if (option.textComparison.indexOf(this.domNode.value.toLowerCase()) === 0) {
+              this.option = option;
+              if (this.isBoth || this.listbox.hasFocus) {
+                this.listbox.setCurrentOptionStyle(option);
+                if (this.isBoth && isPrintableCharacter(char)) {
+                  this.setOption(option);
+                }
+              }
+            }
+            else {
+              this.option = false;
+              this.listbox.setCurrentOptionStyle(false);
             }
           }
+          else {
+            this.listbox.close();
+            this.option = false;
+            this.setActiveDescendant(false);
+          }
         }
-        else {
-          this.option = false;
-          this.listbox.setCurrentOptionStyle(false);
+        else if (this.domNode.value.length) {
+          this.listbox.open();
         }
       }
-      else {
-        this.listbox.close();
-        this.option = false;
-        this.setActiveDescendant(false);
-      }
-    }
-    else {
-      if (this.domNode.value.length) {
-        this.listbox.open();
-      }
-    }
 
+      break;
   }
 
+  // if (event.keyCode !== this.keyCode.RETURN) {
+
+  //   if (this.isList || this.isBoth) {
+  //     option = this.listbox.filterOptions(this.filter, this.option);
+  //     if (option) {
+  //       if (this.listbox.isClosed() && this.domNode.value.length) {
+  //         this.listbox.open();
+  //       }
+
+  //       if (option.textComparison.indexOf(this.domNode.value.toLowerCase()) === 0) {
+  //         this.option = option;
+  //         if (this.isBoth || this.listbox.hasFocus) {
+  //           this.listbox.setCurrentOptionStyle(option);
+  //           if (this.isBoth && isPrintableCharacter(char)) {
+  //             this.setOption(option);
+  //           }
+  //         }
+  //       }
+  //       else {
+  //         this.option = false;
+  //         this.listbox.setCurrentOptionStyle(false);
+  //       }
+  //     }
+  //     else {
+  //       this.listbox.close();
+  //       this.option = false;
+  //       this.setActiveDescendant(false);
+  //     }
+  //   }
+  //   else if (this.domNode.value.length) {
+  //     this.listbox.open();
+  //   }
+
+  // }
+
 
   if (flag) {
     event.stopPropagation();

diff --git a/examples/combobox/js/listbox.js b/examples/combobox/js/listbox.js
@@ -81,8 +81,7 @@ Listbox.prototype.filterOptions = function (filter, currentOption) {
     filter = '';
   }
 
-  var firstMatch = false,
-    i,
+  var i,
     option,
     textContent,
     numItems;