diff --git a/components/SyntaxLookupWidget.js b/components/SyntaxLookupWidget.js
index 425eb7dec..cf0a5a2a2 100644
--- a/components/SyntaxLookupWidget.js
+++ b/components/SyntaxLookupWidget.js
@@ -116,8 +116,10 @@ function SyntaxLookupWidget$SearchBox(Props) {
     evt.preventDefault();
     return Curry._1(onClear, undefined);
   };
-  var onAreaFocus = function (_evt) {
-    if (state === /* Inactive */1) {
+  var onAreaFocus = function (evt) {
+    var el = evt.target;
+    var isDiv = (el.type == null);
+    if (isDiv && state === /* Inactive */1) {
       return Belt_Option.forEach(Caml_option.nullable_to_opt(textInput.current), (function (el) {
                     el.focus();
                     
@@ -168,7 +170,8 @@ function SyntaxLookupWidget$SearchBox(Props) {
                 state === /* Active */0 ? "border-fire" : "border-fire-40"
               ) + " flex items-center border rounded-lg py-4 px-5",
               tabIndex: -1,
-              onFocus: onAreaFocus
+              onFocus: onAreaFocus,
+              onBlur: onBlur
             }, React.createElement(Icon.MagnifierGlass.make, {
                   className: (
                     state === /* Active */0 ? "text-fire" : "text-fire-80"
@@ -181,10 +184,10 @@ function SyntaxLookupWidget$SearchBox(Props) {
                   value: value,
                   onKeyDown: onKeyDown,
                   onFocus: onFocus,
-                  onBlur: onBlur,
                   onChange: onChange
                 }), React.createElement("button", {
                   className: value === "" ? "hidden" : "block",
+                  onFocus: onFocus,
                   onMouseDown: onMouseDownClear
                 }, React.createElement(Icon.Close.make, {
                       className: "w-4 h-4 text-fire"
@@ -212,13 +215,17 @@ function SyntaxLookupWidget$DetailBox(Props) {
     var first = more[0];
     var second = more[1];
     var third = more[2];
-    summaryEl = [
-      first,
-      React.createElement("span", {
-            className: "text-fire"
-          }, second),
-      third
-    ];
+    summaryEl = Belt_Array.mapWithIndex([
+          first,
+          React.createElement("span", {
+                className: "text-fire"
+              }, second),
+          third
+        ], (function (i, el) {
+            return React.createElement("span", {
+                        key: String(i)
+                      }, el);
+          }));
   }
   return React.createElement("div", undefined, React.createElement("div", {
                   className: "text-21 border-b border-fire-40 pb-4 mb-4 font-semibold"
@@ -369,11 +376,11 @@ function SyntaxLookupWidget(Props) {
                                 }));
                 }));
           var el = React.createElement("div", {
+                key: title,
                 className: "first:mt-0 mt-12"
               }, React.createElement(SyntaxLookupWidget$Category, {
                     title: title,
-                    children: children,
-                    key: title
+                    children: children
                   }));
           acc.push(el);
           return acc;
diff --git a/components/SyntaxLookupWidget.res b/components/SyntaxLookupWidget.res
index 0cf373a46..d84a32665 100644
--- a/components/SyntaxLookupWidget.res
+++ b/components/SyntaxLookupWidget.res
@@ -10,8 +10,8 @@ module MdxComp = {
   `
   )
 
-  @bs.get
-  external frontmatter: t => Js.Json.t = "frontmatter"
+  /* @bs.get */
+  /* external frontmatter: t => Js.Json.t = "frontmatter" */
 }
 
 @module("misc_docs/syntax/decorator_module.mdx")
@@ -106,6 +106,9 @@ let getAnchor = path => {
 
 module SearchBox = {
   @bs.send external focus: Dom.element => unit = "focus"
+  @bs.send external blur: Dom.element => unit = "blur"
+
+  external toDomElement: Js.t<'a> => Dom.element = "%identity"
 
   type state =
     | Active
@@ -129,8 +132,11 @@ module SearchBox = {
     let focusInput = () =>
       textInput.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
 
-    let onAreaFocus = _evt => {
-      if state === Inactive {
+    let onAreaFocus = evt => {
+      let el = ReactEvent.Focus.target(evt)
+      let isDiv = Js.Null_undefined.isNullable(el["type"])
+
+      if isDiv && state === Inactive {
         focusInput()
       }
     }
@@ -175,6 +181,7 @@ module SearchBox = {
     <div
       tabIndex={-1}
       onFocus=onAreaFocus
+      onBlur
       className={(
         state === Active ? "border-fire" : "border-fire-40"
       ) ++ " flex items-center border rounded-lg py-4 px-5"}>
@@ -185,14 +192,13 @@ module SearchBox = {
         value
         ref={ReactDOM.Ref.domRef(textInput)}
         onFocus
-        onBlur
         onKeyDown
         onChange={onChange}
         placeholder="Enter keywords or syntax..."
         className="text-16 outline-none ml-4 w-full"
         type_="text"
       />
-      <button className={value === "" ? "hidden" : "block"} onMouseDown=onMouseDownClear>
+      <button onFocus className={value === "" ? "hidden" : "block"} onMouseDown=onMouseDownClear>
         <Icon.Close className="w-4 h-4 text-fire" />
       </button>
     </div>
@@ -218,7 +224,11 @@ module DetailBox = {
         React.string(first),
         <span className="text-fire"> {React.string(second)} </span>,
         React.string(third),
-      ]->React.array
+      ]
+      ->Belt.Array.mapWithIndex((i, el) => {
+        <span key={Belt.Int.toString(i)}> el </span>
+      })
+      ->React.array
     | more => Belt.Array.map(more, s => React.string(s))->React.array
     }
 
@@ -347,8 +357,8 @@ let make = () => {
           </span>
         })
         let el =
-          <div className="first:mt-0 mt-12">
-            <Category key=title title> {React.array(children)} </Category>
+          <div key=title className="first:mt-0 mt-12">
+            <Category title> {React.array(children)} </Category>
           </div>
         Js.Array2.push(acc, el)->ignore
         acc