smoothly 1.0.0-alpha.172 → 1.0.0-alpha.173

package/dist/cjs/smoothly-app_71.cjs.entry.js

@@ -9695,17 +9695,19 @@ const SmoothlyInputSelect = class {
   }
   onKeyDown(event) {
     event.stopPropagation();
-    event.preventDefault();
+    if (event.key != "Tab" && !event.ctrlKey && !event.metaKey)
+      event.preventDefault();
     if (this.opened) {
-      let direction = 0;
       switch (event.key) {
         case "ArrowUp":
-          direction = -1;
+          this.move(-1);
           break;
         case "ArrowDown":
-          direction = 1;
+          this.move(1);
           break;
         case "Escape":
+          if (this.filter == "")
+            this.opened = false;
           this.filter = "";
           break;
         case "Backspace":
@@ -9713,39 +9715,61 @@ const SmoothlyInputSelect = class {
           break;
         case "Enter":
           const result = this.items.find(item => item.marked);
-          if (result === null || result === void 0 ? void 0 : result.value) {
+          if (result === null || result === void 0 ? void 0 : result.value)
             result.selected = true;
-          }
           this.opened = false;
           this.filter = "";
           break;
+        case "Tab":
+          this.opened = false;
+          break;
         default:
           if (event.key.length == 1)
             this.filter += event.key;
           break;
       }
-      this.move(direction);
     }
-    else if (event.key == "Enter")
-      this.opened = true;
+    else {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          this.opened = true;
+          break;
+        case "ArrowDown":
+          this.opened = true;
+          this.move(0);
+          break;
+        case "ArrowUp":
+          this.opened = true;
+          this.move(-1);
+          break;
+        case "Tab":
+          break;
+        default:
+          this.opened = true;
+          if (event.key.length == 1)
+            this.filter += event.key;
+          break;
+      }
+    }
   }
   move(direction) {
-    if (direction) {
-      let markedIndex = this.items.findIndex(item => item.marked);
-      if (markedIndex == -1)
-        markedIndex = this.items.findIndex(item => item.selected);
-      if (this.items[markedIndex])
-        this.items[markedIndex].marked = false;
-      do {
-        markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
-      } while (this.items[markedIndex].hidden);
-      this.items[markedIndex].marked = true;
-      this.items[markedIndex].focus();
-    }
+    let markedIndex = this.items.findIndex(item => item.marked);
+    if (markedIndex == -1)
+      markedIndex = this.items.findIndex(item => item.selected);
+    if (this.items[markedIndex])
+      this.items[markedIndex].marked = false;
+    if (markedIndex == -1)
+      markedIndex = 0;
+    do {
+      markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
+    } while (this.items[markedIndex].hidden);
+    this.items[markedIndex].marked = true;
+    this.items[markedIndex].focus();
   }
   render() {
     var _a, _b;
-    return (index.h(index.Host, { tabIndex: 2, class: (_a = (this.missing ? "missing" : this.type)) !== null && _a !== void 0 ? _a : "" }, index.h("main", { ref: element => (this.mainElement = element) }, (_b = this.initialPrompt) !== null && _b !== void 0 ? _b : "(none)"), this.filter.length != 0 ? (index.h("aside", { ref: element => (this.aside = element) }, this.filter, index.h("button", { onClick: e => {
+    return (index.h(index.Host, { tabIndex: 0, class: (_a = (this.missing ? "missing" : this.type)) !== null && _a !== void 0 ? _a : "" }, index.h("main", { ref: element => (this.mainElement = element) }, (_b = this.initialPrompt) !== null && _b !== void 0 ? _b : "(none)"), this.filter.length != 0 ? (index.h("aside", { ref: element => (this.aside = element) }, this.filter, index.h("button", { onClick: e => {
         e.stopPropagation();
         this.filter = "";
       } }, index.h("smoothly-icon", { name: "close", size: "small" })))) : undefined, this.opened ? index.h("section", { onClick: () => (this.opened = true) }) : [], index.h("div", { class: this.opened ? "" : "hidden" }, index.h("nav", null, index.h("slot", null)))));