fix search box and docson

Author: jderochervlk

app/routes/MdxRoute.res

@@ -47,7 +47,8 @@ let components = {
   "Warn": Markdown.Warn.make,
   "CommunityContent": CommunityContent.make,
   "WarningTable": WarningTable.make,
-  "Docson": Docson.make,
+  "Docson": DocsonLazy.make,
+  "Suspense": React.Suspense.make,
 }
 
 let convertToNavItems = (items, rootPath) =>

docs/manual/build-configuration-schema.mdx

@@ -7,4 +7,6 @@ section: "Build System"
 order: 3
 ---
 
-<Docson tag="master" />
+<Suspense>
+    <Docson tag="master" />
+</Suspense>

src/SyntaxLookup.res

@@ -251,15 +251,18 @@ let make = (
   // [2] Search exactly matches an item - trigger a route change, and allow the EFFECT to update the view state.
   // [3] Search does not match an item - immediately update the view state to show filtered items.
   let onSearchValueChange = value => {
+    Console.log2("value changed", value)
     switch value {
-    | "" => navigate("/syntax-lookup")
+    | "" =>
+      setState(_ => ShowAll)
+      navigate("/syntax-lookup")
     | value =>
       switch findItemByExactName(value) {
       | None => {
           let filtered = searchItems(value)
           setState(_ => ShowFiltered(value, filtered))
         }
-      | Some(item) => ReactRouter.navigate("/syntax-lookup/" ++ item.id)
+      | Some(item) => navigate("/syntax-lookup/" ++ item.id)
       }
     }
   }
@@ -333,11 +336,13 @@ let make = (
     })
   }
 
-  let (searchValue, completionItems) = switch state {
-  | ShowFiltered(search, items) => (search, items)
-  | ShowAll => ("", allItems)
-  | ShowDetails(item) => (item.name, [item])
-  }
+  let (searchValue, completionItems) = React.useMemo(() =>
+    switch state {
+    | ShowFiltered(search, items) => (search, items)
+    | ShowAll => ("", allItems)
+    | ShowDetails(item) => (item.name, [item])
+    }
+  , [state])
 
   let onSearchClear = () => {
     onSearchValueChange("")

src/components/DocsonLazy.res

@@ -0,0 +1 @@
+let make = React.lazy_(() => import(Docson.make))

src/components/SearchBox.res

@@ -49,6 +49,7 @@ let make = (
 
     let full = (ctrlKey ? "CTRL+" : "") ++ key
 
+    // TODO RR7 test keyboard input
     switch full {
     | "Escape" => onClear()
     | "Tab" =>
@@ -67,7 +68,6 @@ let make = (
   }
 
   let onChange = evt => {
-    ReactEvent.Form.preventDefault(evt)
     let value = ReactEvent.Form.target(evt)["value"]
     onValueChange(value)
   }
@@ -83,7 +83,6 @@ let make = (
     <Icon.MagnifierGlass
       className={(state === Active ? "text-fire" : "text-fire-70") ++ " w-4 h-4"}
     />
-    // TODO RR7: deleting input stops working with one character left...
     <input
       value
       ref={ReactDOM.Ref.domRef((Obj.magic(textInput): React.ref<Nullable.t<Dom.element>>))}
@@ -94,11 +93,7 @@ let make = (
       className="text-16 outline-hidden ml-4 w-full"
       type_="text"
     />
-    <button
-      onFocus
-      className={"value" /* TODO */ === "" ? "hidden" : "block"}
-      onMouseDown=onMouseDownClear
-    >
+    <button onFocus className={value === "" ? "hidden" : "block"} onMouseDown=onMouseDownClear>
       <Icon.Close className="w-4 h-4 text-fire" />
     </button>
   </div>