Merge pull request #22 from uConnect/vcc-2970/select-only-combobox

VCC-2970 VCC-2968 Add a select-only variant; add additional keyboard interaction
uConnect · Apr 9, 2024 · 01f81bc · 01f81bc
2 parents bf7d0bc + f5303c7
commit 01f81bc
Show file tree

Hide file tree

Showing 8 changed files with 319 additions and 1,995 deletions.
diff --git a/README.md b/README.md
@@ -174,12 +174,21 @@ The class added below will be applied to the corresponding elements during the t
     ```
 * `filter` (_String|Function_): A filter-type string (`'contains'`, `'starts-with'`, or `'equals'`) or a function that returns a array of filtered options.
   * Defaults to `'contains'`
+  * When `selectOnly` is `true`, forced to `'starts-with'`
 * `autoFilter` (_Boolean_): To enable / disable filtering options on front end. If the developer wants to filter options from the server, then it should be false
   * Defaults to `'true'`
+  * When `selectOnly` is `true`, forced to `false`
 * `toggleButtonIcon` (_String_): Text or HTML that gets inserted into the toggle button element.
   * Examples: `▼`, `<svg ...>`, `<i class="fa fa-chevron-down"></i>`, `<img src...>`, etc.
   * If a HTML-initialized combobox already contains text/markup and a `toggleButtonIcon` is provided, the `toggleButtonIcon` will replace the existing content.
   * Defaults to `null` (no icon inserted).
+* `selectOnly` (_Boolean_): Only allows selection from the dropdown list, like a native `<select>` element. Text input is not enabled, but common keyboard behaviors (such as jumping to the first matching option when a letter is typed) are still enabled.
+  * Defaults to `false`
+  * `<select>`-initialized comboboxes have their `<input>` element replaced with a `<div>` element.
+  * `<input>`-initialized comboboxes retain a hidden `<input>` element so that forms can be submitted with the selected value(s), but a `<div>` element is used for the visible input.
+* `selectSearchTimeout` (_Number_): How long to wait before resetting the search query when the user stops typing.
+  * Defaults to `500`
+  * Only relevant if `selectOnly` is `true`
 
 ### Example Combobo call with options
 

diff --git a/demo/index.html b/demo/index.html
@@ -164,6 +164,46 @@ <h2>Single select with custom toggle button icon</h2>
       </div>
       <button type="button">Submit</button>
     </section>
+    <section class="select-only">
+      <div class="wrp">
+        <h2>Select-Only</h2>
+        <label for="combobox-select-only">Pet</label>
+        <select id="combobox-select-only">
+          <option value="cat">Cat</option>
+          <option value="dog">Dog</option>
+          <option value="fish">Fish</option>
+          <option value="hamster">Hamster</option>
+          <option value="iguana">Iguana</option>
+          <option value="rabbit">Rabbit</option>
+          <option value="rock">Rock</option>
+          <option value="roly-poly">Roly-Poly Bug</option>
+          <option value="snake">Snake</option>
+        </select>
+      </div>
+      <button type="button">Submit</button>
+    </section>
+    <section class="select-only-as-input">
+      <div class="wrp">
+        <h2>Select-Only as &lt;input&gt;</h2>
+        <label for="combobox-select-only-as-input">Pet</label>
+        <div class="combo-wrap">
+          <input type="text" class="combobox" id="combobox-select-only-as-input">
+          <span aria-hidden="true" class="trigger" data-trigger="select-only-as-input"></span>
+          <div class="listbox">
+            <div class="option">Cat</div>
+            <div class="option">Dog</div>
+            <div class="option">Fish</div>
+            <div class="option">Hamster</div>
+            <div class="option">Iguana</div>
+            <div class="option">Rabbit</div>
+            <div class="option">Rock</div>
+            <div class="option">Roly-Poly Bug</div>
+            <div class="option">Snake</div>
+          </div>
+        </div>
+      </div>
+      <button type="button">Submit</button>
+    </section>
     <footer></footer>
     <script src="../dist/combobo.js" charset="utf-8"></script>
     <script>
@@ -172,11 +212,11 @@ <h2>Single select with custom toggle button icon</h2>
           if (!val || str.toLowerCase().indexOf(val.toLowerCase()) === -1) {
             return str;
           }
-          var regex = new RegExp(val, 'i');
+          const regex = new RegExp(val, 'i');
           return str.replace(regex, '<span class="underline">$&</span>');
         }
 
-        var box = {
+        const box = {
           'single': new Combobo({
             input: '#combobox-single',
             list: '.bands .listbox',
@@ -191,7 +231,7 @@ <h2>Single select with custom toggle button icon</h2>
             activeClass: 'active',
             noResultsText: 'No results found.',
             optionValue: function (option) {
-              var inputVal = box['single-with-groups'].input.value;
+              const inputVal = box['single-with-groups'].input.value;
               return wrapNum(option.innerText, inputVal);
             },
             announcement: {
@@ -210,7 +250,7 @@ <h2>Single select with custom toggle button icon</h2>
             },
             noResultsText: 'Nothing to see here folks.',
             optionValue: function (option) {
-              var inputVal = box.multiselect.input.value;
+              const inputVal = box.multiselect.input.value;
               return wrapNum(option.innerText, inputVal)
             }
           }),
@@ -232,11 +272,23 @@ <h2>Single select with custom toggle button icon</h2>
             noResultsText: 'No results found.',
             toggleButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="14px"><!-- Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --><defs><linearGradient id="gradient" x1="0" x2="448" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="yellow" /><stop offset="1" stop-color="cyan" /></linearGradient></defs><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" fill="url(#gradient)" /></svg>',
           }),
+          'select-only': new Combobo({
+            select: '#combobox-select-only',
+            list: '.select-only .listbox',
+            activeClass: 'active',
+            selectOnly: true,
+          }),
+          'select-only-as-input': new Combobo({
+            input: '#combobox-select-only-as-input',
+            list: '.select-only-as-input .listbox',
+            activeClass: 'active',
+            selectOnly: true,
+          }),
         };
 
         function groupChangeHandler(newGroup) {
-          var groupLabel = newGroup.querySelector('.optgroup-label').innerText;
-          var len = Array.prototype.slice.call(
+          const groupLabel = newGroup.querySelector('.optgroup-label').innerText;
+          const len = Array.prototype.slice.call(
             newGroup.querySelectorAll('.option')
           ).filter(function (opt) {
             return opt.style.display !== 'none';

diff --git a/demo/styles.css b/demo/styles.css
@@ -74,6 +74,7 @@ button:active {
 
 .combobox {
   width: 250px;
+  height: 40px;
   padding: 10px 35px 10px 5px;
   border: 1px solid #fff;
   box-sizing: border-box;
@@ -83,6 +84,9 @@ button:active {
   background-color: #fff;
   color: #212E59;
   box-shadow: 0 0 5px #000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .trigger {