make user search bar work on mobile better

app/javascript/bundles/Main/components/ListItem.tsx

@@ -30,46 +30,31 @@ export default function ListItem({
     COMMON_LIST_ELEM_CLASSES,
     "relative",
     "border-t-0",
-    isLast ? "rounded-b-lg" : "",
-  ];
+    isLast && "rounded-b-lg",
+    style === "item" && selected && "bg-slate-700 text-slate-100",
+    style === "info" && "text-slate-500 italic",
+    style === "error" && "text-red-500",
+    "hover:bg-slate-600 hover:text-slate-200"
+  ].filter(Boolean);
 
-  switch (style) {
-    case "item":
-      textClassName.push(selected ? "bg-slate-700 text-slate-100" : "");
-      break;
-    case "info":
-      textClassName.push("text-slate-500 italic");
-      break;
-    case "error":
-      textClassName.push("text-red-500");
-      iconClassName.push("text-red-500");
-      break;
-  }
-
-  textClassName.push("hover:bg-slate-600 hover:text-slate-200");
-
-  let thumbElem = <></>;
-  if (thumb != null) {
-    thumbElem = (
-      <img src={thumb} alt="thumbnail" className="inline w-full"></img>
-    );
-  }
 
   return (
     <a
-      className={`relative block`}
-      onMouseDown={(e) => {
-        // needed so the onClick fires even when the text input has focus
-        e.preventDefault();
-        return false;
+      className="relative block"
+      onPointerUp={() => {
+        if (href) {
+          window.location.href = href;
+        }
       }}
       href={href}
     >
-      {style == "error" ? (
+      {style === "error" && (
         <Icon type="exclamation-circle" className={iconClassName.join(" ")} />
-      ) : null}
+      )}
       <div className={textClassName.join(" ")}>
-        <div className="inline-block w-8">{thumbElem}</div>
+        <div className="inline-block w-8">
+          {thumb && <img src={thumb} alt="thumbnail" className="inline w-full" />}
+        </div>
         <div className="inline-block pl-1">{value}</div>
       </div>
     </a>

app/javascript/bundles/Main/components/UserSearchBar.tsx

@@ -1,6 +1,6 @@
 import { debounce, isEmpty } from "lodash";
 import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { StrictMode, useCallback, useEffect, useRef, useState } from "react";
 import Icon from "./Icon";
 import ListItem from "./ListItem";
 import Trie, { TrieNode } from "../lib/Trie";
@@ -60,7 +60,6 @@ export default function UserSearchBar({ isServerRendered }: PropTypes) {
   const [userList, setUserList] = useState<ServerResponse["users"]>([]);
   const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [listHovered, setListHovered] = useState(false);
   const [pendingRequest, setPendingRequest] = useState<AbortController | null>(
     null
   );
@@ -215,23 +214,14 @@ export default function UserSearchBar({ isServerRendered }: PropTypes) {
     typingSettled &&
     userList.length == 0;
   const itemsShown =
-    !isEmpty(userName) && (isFocused || listHovered) && userList.length > 0;
+    !isEmpty(userName) && userList.length > 0;
   const anyShown = infoShown || errorShown || itemsShown;
 
   console.log("any shown", {anyShown});
 
   function UserSearchBarItems() {
     return (
-      <div
-        onPointerOver={() => {
-          log_info("hovered list");
-          setListHovered(true);
-        }}
-        onPointerLeave={() => {
-          log_info("left list");
-          setListHovered(false);
-        }}
-      >
+      <div>
         {errorShown ? (
           <ListItem
             key="error"

app/views/pages/root.html.erb

@@ -2,7 +2,7 @@
   <%# <%= javascript_pack_tag "application-bundle" %>
 <% end %>
 <div class='w-full mt-2 sm:mt-6'>
-  <%= react_component("UserSearchBar", props: {}, prerender: true) %>
+  <%= react_component("UserSearchBar", props: {}, prerender: true, strict_mode: true) %>
   <div class="mt-2 mx-auto w-full p-2 sm:p-2 sm:border-2 sm:border-slate-100  sm:max-w-md rounded-xl">
     <div class='text-slate-400 italic'>Questions? Comments? Suggestions?</div>
     <div class='text-slate-400 italic' >Contact @DeltaNoises -