Handle arrow down key press

Author: bendera

src/includes/vscode-select/OptionListController.ts

@@ -56,7 +56,7 @@ export class OptionListController implements ReactiveController {
   }
 
   set selectedIndex(index: number) {
-    const op = this.getOptionByIndex(index)
+    const op = this.getOptionByIndex(index);
 
     this._selectedIndex = op ? index : -1;
     this._host.requestUpdate();
@@ -256,10 +256,37 @@ export class OptionListController implements ReactiveController {
     return this._options[index];
   }
 
+  next(fromIndex?: number): {value: InternalOption; last: boolean} {
+    const from = fromIndex ?? this._activeIndex;
+    let last = false;
+
+    let nextIndex = -1;
+
+    for (let i = from + 1; i < this._options.length; i++) {
+      if (
+        this._options[i] &&
+        !this._options[i].disabled &&
+        this._options[i].visible
+      ) {
+        nextIndex = i;
+        break;
+      }
+    }
+
+    const value =
+      nextIndex > -1 ? this._options[nextIndex] : (this._options[from] ?? null);
+    last = nextIndex === -1;
+
+    return {
+      value,
+      last,
+    };
+  }
+
   getNextSelectableOption(fromIndex?: number): InternalOption | null {
     const from = fromIndex ?? this._activeIndex;
 
-    if (this._options.length === 0) {
+    /* if (this._options.length === 0) {
       return null;
     }
 
@@ -269,7 +296,7 @@ export class OptionListController implements ReactiveController {
 
     if (from !== -1 && !this._options[from + 1]) {
       return this._options[from];
-    }
+    } */
 
     let nextIndex = -1;
 

src/includes/vscode-select/vscode-select-base.ts

@@ -529,14 +529,15 @@ export class VscodeSelectBase extends VscElement {
         return;
       }
 
-      if (suggestedOptionVisible && this._opts.activeIndex === numOpts - 2) {
+      const nextOp = this._opts.next();
+
+      if (suggestedOptionVisible && nextOp.last) {
         this._isPlaceholderOptionActive = true;
         this._adjustOptionListScrollPos('down', numOpts - 1);
         this._opts.activeIndex = -1;
-      } else if (this._opts.activeIndex < numOpts - 1) {
-        const nextOpt = this._opts.activateNext();
-        console.log(nextOpt)
-        const nextSelectableIndex = nextOpt?.relativeIndex ?? -1;
+      } else {
+        const nextSelectableIndex = nextOp?.value.relativeIndex ?? -1;
+        this._opts.activeIndex = nextOp.value.index;
 
         if (nextSelectableIndex > -1) {
           this._adjustOptionListScrollPos('down', nextSelectableIndex);

src/vscode-single-select/vscode-single-select.ts

@@ -242,6 +242,7 @@ export class VscodeSingleSelect
     }
   }
 
+  //#region event handlers
   protected override _onSlotChange(): void {
     super._onSlotChange();
 
@@ -300,7 +301,7 @@ export class VscodeSingleSelect
     this._selectedIndex = nextIndex;
     this._activeIndex = nextIndex;
     this._value = nextIndex > -1 ? this._options[nextIndex].value : ''; */
-    this._internals.setFormValue(this._value);
+    this._internals.setFormValue(this._opts.value as string);
     this._manageRequired();
     this._dispatchChangeEvent();
   }
@@ -373,6 +374,7 @@ export class VscodeSingleSelect
       this._dispatchChangeEvent();
     }
   }
+  //#endregion
 
   protected override _manageRequired() {
     const {value} = this;