Attempt at using inline select

frontend/public/index.css

@@ -121,13 +121,13 @@ details > summary {
   color: red;
 }
 
-span.word-chip {
+.word-chip {
   background-color: #222222;
   color: white;
   padding: 2px;
 }
 
-span.word-chip.flagged {
+.word-chip.flagged {
   background-color: #dd1111;
 }
 

frontend/src/components/WordChip.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react"
+import React from "react"
 
 export const WordChip = ({
   word,
@@ -13,63 +13,39 @@ export const WordChip = ({
   replacements: string[],
   onReplace: (newWord: string) => void
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const dropdownRef = useRef<HTMLSelectElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsExpanded(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  const handleClick = () => {
-    if (logprob < threshold && replacements.length > 0) {
-      setIsExpanded(true);
-    }
-  }
 
   const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
     console.log("handleReplacement", event.target.value)
     const newWord = event.target.value
     onReplace(newWord)
-    setIsExpanded(false);
+  }
+
+  const className = `word-chip ${logprob < threshold ? "flagged" : ""}`
+
+  if (replacements.length === 0) {
+    return <span className={className}>{word}</span>
   }
 
   return (
-    <span
-      title={logprob.toFixed(2)}
-      className={`word-chip ${logprob < threshold ? "flagged" : ""}`}
-      style={{ position: "relative", cursor: logprob < threshold ? "pointer" : "default" }}
-      onClick={handleClick}
+    <select
+      className={className}
+      onChange={handleReplacement}
+      style={{
+        appearance: 'none',
+        border: 'none',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        color: 'inherit',
+        background: 'inherit',
+        backgroundColor: 'red',
+        padding: 0,
+        cursor: 'pointer'
+      }}
     >
-      {word}
-      {isExpanded && (
-        <select
-          ref={dropdownRef}
-          onChange={handleReplacement}
-          value={word}
-          style={{
-            position: "absolute",
-            top: "100%",
-            left: 0,
-            zIndex: 1000,
-            overflowY: "auto"
-          }}
-          size={replacements.length + 1}
-        >
-          <option key="original" hidden>{word}</option>
-          {replacements.map((r, i) => (
-            <option key={i} value={r}>{r}</option>
-          ))}
-        </select>
-      )}
-    </span>
+      <option key="original" hidden>{word}</option>
+      {replacements.map((r, i) => (
+        <option key={i} value={r}>{r}</option>
+      ))}
+    </select>
   )
 }