From 3379891bd79d2cfd23331102132bfc01be97b324 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sun, 27 Oct 2024 11:00:03 +0000
Subject: [PATCH] fix label bug & make items focusable

---
 static/js/base.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/static/js/base.js b/static/js/base.js
index 2d5d22b..8e9914e 100644
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -124,13 +124,11 @@ $(document).ready(function() {
                 }
             });
 
-            console.log(JSON.stringify(names))
-
-            const len = values.length;
+            const len = Array.isArray(values) ? values.length : 1;
             const total = $select.find("option").length;
 
             if (len === 0) { $selected.html(defaultSelectedHtml); }
-            else if (len === total) {$selected.text("All Selected")}
+            else if (len === total && total > 3) {$selected.text("All Selected")}
             else if (len > 3) { $selected.text(`${values.length} Selected`); }
             else { $selected.text(names.join(", ")); }
 
@@ -154,7 +152,7 @@ $(document).ready(function() {
             const $select = $(this);
 
             // The custom input to replace the original select
-            const $container = $('<div class="corbz-select-container">');
+            const $container = $('<div class="corbz-select-container" tabindex="0">');
 
             // Contains text indicating the 'selected' options, acts as a
             // button to open the dropdown.
@@ -217,19 +215,21 @@ $(document).ready(function() {
                 updateSelectedDisplay($select, $selected, $dropdown, settings)
             }
 
+            const onOptionSelect = $option => {
+                $dropdown.hide();
+                $container.removeClass("active");
+                $select.val($option.data("value"));
+                updateSelectedDisplayWrapper();
+            }
+
             $select.find("option").each(function() {
-                const $option = $('<div class="corbz-select-option">');
+                const $option = $('<div class="corbz-select-option" tabindex="0">');
                 $option.data("name", $(this).text());
                 $option.data("value", $(this).val());
     
                 if (!settings.multiple) {
                     $option.text($(this).text());
-                    $option.on("click", function() {
-                        $dropdown.hide();
-                        $container.removeClass("active");
-                        $select.val($option.data("value"));
-                        updateSelectedDisplayWrapper();
-                    });
+                    $option.on("click", () => onOptionSelect($option));
                 }
                 else {
                     const $checkbox = $(`<input type="checkbox" name="${settings.id}" class="corbz-option-checkbox" value="${$(this).val()}">`).val($(this).val());