basefn 1.9.0 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"

package/src/components/Basefn__Spotlight.res

@@ -103,16 +103,15 @@ let make = (
     }
   }
 
-  // Auto-focus input when opened
+  // Auto-focus input when opened using requestAnimationFrame for reliable timing
   let _ = Effect.run(() => {
     if Signal.get(isOpen) {
-      let _ = setTimeout(() => {
-        let doc: Dom.element = %raw(`document.body`)
-        switch querySelector(doc, ".basefn-spotlight__input") {
-        | Value(el) => focus(el)
-        | _ => ()
-        }
-      }, 16)
+      let _ = %raw(`requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__input");
+          if (el) el.focus();
+        })
+      })`)
     }
     None
   })
@@ -165,7 +164,7 @@ let make = (
     if Signal.get(isOpen) {
       [
         <div class="basefn-spotlight-backdrop" onClick={handleBackdropClick}>
-          <div class="basefn-spotlight">
+          <div class="basefn-spotlight" onKeyDown={handleKeyDown}>
             <div class="basefn-spotlight__input-wrapper">
               <Basefn__Icon name={Basefn__Icon.Search} size={Basefn__Icon.Sm} />
               <input
@@ -174,7 +173,6 @@ let make = (
                 placeholder
                 value={ReactiveProp.reactive(query)}
                 onInput={handleInput}
-                onKeyDown={handleKeyDown}
               />
             </div>
             <div class="basefn-spotlight__results"> {renderResults()} </div>

package/src/components/Basefn__Spotlight.res.mjs

@@ -93,14 +93,12 @@ function Basefn__Spotlight(props) {
   };
   Xote.Effect.run(() => {
     if (Xote.Signal.get(isOpen)) {
-      setTimeout(() => {
-        let doc = document.body;
-        let el = doc.querySelector(".basefn-spotlight__input");
-        if (el == null) {
-          return;
-        }
-        el.focus();
-      }, 16);
+      ((requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__input");
+          if (el) el.focus();
+        })
+      })));
     }
   }, undefined);
   let renderResults = () => {
@@ -155,6 +153,7 @@ function Basefn__Spotlight(props) {
           onClick: handleBackdropClick,
           children: Xote__JSX.Elements.jsxs("div", {
             class: "basefn-spotlight",
+            onKeyDown: handleKeyDown,
             children: Xote__JSX.array([
               Xote__JSX.Elements.jsxs("div", {
                 class: "basefn-spotlight__input-wrapper",
@@ -168,8 +167,7 @@ function Basefn__Spotlight(props) {
                     type: "text",
                     value: Xote.ReactiveProp.reactive(query),
                     placeholder: placeholder,
-                    onInput: handleInput,
-                    onKeyDown: handleKeyDown
+                    onInput: handleInput
                   })
                 ])
               }),