@truenas/ui-components 0.4.9 → 0.4.10

package/fesm2022/truenas-ui-components.mjs

@@ -9584,21 +9584,20 @@ class TnSelectComponent {
             return;
         }
         this.isOpen.set(true);
-        // Seed keyboard focus at the current selection when there is one;
-        // otherwise leave it unset so the next ArrowDown lands on the first item.
+        // Seed keyboard focus at the current selection when there is one, else at
+        // the first navigable row. Something is ALWAYS highlighted while the panel
+        // is open (matching mat-select): a freshly-opened select must be operable
+        // with Enter/Space straight away, without an ArrowDown first.
         const selected = this.selectedValue();
-        if (selected !== null && selected !== undefined) {
-            const idx = this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
-            this.focusedIndex.set(idx);
-        }
-        else if (this.emptyOption()) {
-            // A cleared value means the empty option (always first) is the current
-            // selection — seed keyboard focus there.
-            this.focusedIndex.set(0);
-        }
-        else {
-            this.focusedIndex.set(-1);
-        }
+        const idx = selected === null || selected === undefined
+            ? -1
+            : this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
+        // findIndex can also miss (e.g. the selected option is disabled, so it
+        // isn't navigable) — fall back to the first row there too. `-1` would
+        // leave the panel with nothing highlighted, which is the state we're
+        // avoiding. When `allowEmpty` is set the first row IS the empty option,
+        // so a cleared value lands on it for free.
+        this.focusedIndex.set(idx >= 0 ? idx : 0);
         this.attachOverlay();
     }
     /**
@@ -9931,10 +9930,9 @@ class TnSelectComponent {
             case 'ArrowDown':
                 event.preventDefault();
                 if (!this.isOpen()) {
+                    // openDropdown() already seeds the highlight (selection, else first),
+                    // so opening must not also advance a row.
                     this.openDropdown();
-                    if (this.focusedIndex() < 0) {
-                        this.moveFocus('first');
-                    }
                 }
                 else {
                     this.moveFocus(1);