From b365206d0541b7d7d1b0a9012346d0eee8150526 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Fri, 31 Jan 2025 01:41:40 +0000
Subject: [PATCH] Switch block previews from hover + toggle to toggle only

---
 client/src/components/ComboBox/ComboBox.scss |  9 ++++++++
 client/src/components/ComboBox/ComboBox.tsx  | 23 +++++++++-----------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ComboBox/ComboBox.scss b/client/src/components/ComboBox/ComboBox.scss
index f02ac668b8..e70c23f4f8 100644
--- a/client/src/components/ComboBox/ComboBox.scss
+++ b/client/src/components/ComboBox/ComboBox.scss
@@ -137,6 +137,15 @@ $width: clamp(300px, 75vw, 1000px);
   &:hover {
     color: theme('colors.icon-secondary-hover');
   }
+
+  &[aria-expanded='true'] {
+    color: theme('colors.text-link-default');
+
+    @media (forced-colors: active) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }
 
 .w-combobox__option-row--col1 {
diff --git a/client/src/components/ComboBox/ComboBox.tsx b/client/src/components/ComboBox/ComboBox.tsx
index fb1b3b4b5f..6465d4ebd8 100644
--- a/client/src/components/ComboBox/ComboBox.tsx
+++ b/client/src/components/ComboBox/ComboBox.tsx
@@ -68,6 +68,7 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
     (category) => category.items || [],
   );
   const [inputItems, setInputItems] = useState<ComboBoxOption[]>(flatItems);
+  const [previewedIndex, setPreviewedIndex] = useState<number>(-1);
   // Re-create the categories so the two-column layout flows as expected.
   const categories = items.reduce<ComboBoxCategory<ComboBoxOption>[]>(
     (cats, cat, index) => {
@@ -88,7 +89,6 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
     getMenuProps,
     getInputProps,
     getItemProps,
-    highlightedIndex,
     setHighlightedIndex,
     setInputValue,
     openMenu,
@@ -153,12 +153,11 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
       setInputItems(filtered);
       // Always reset the first item to highlighted on filtering, to speed up selection.
       setHighlightedIndex(0);
+      // Hide any preview when the user starts typing.
+      setPreviewedIndex(-1);
     },
   });
 
-  const [lastHighlightedIndex, setLastHighlightedIndex] =
-    useState(highlightedIndex);
-
   useEffect(() => {
     if (inputValue) {
       openMenu();
@@ -178,15 +177,8 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
     }
   }, [inputValue]);
 
-  if (
-    inputItems[highlightedIndex] &&
-    highlightedIndex !== lastHighlightedIndex
-  ) {
-    setLastHighlightedIndex(highlightedIndex);
-  }
-
   const previewedBlock =
-    inputItems[highlightedIndex] || inputItems[lastHighlightedIndex];
+    previewedIndex >= 0 ? inputItems[previewedIndex] : null;
 
   return (
     <div className="w-combobox-container">
@@ -283,8 +275,13 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
                         <button
                           className="w-combobox__option-preview"
                           aria-label={comboBoxPreviewLabel}
+                          aria-expanded={previewedIndex === itemIndex}
                           type="button"
-                          onClick={() => setHighlightedIndex(itemIndex)}
+                          onClick={() =>
+                            setPreviewedIndex(
+                              previewedIndex === itemIndex ? -1 : itemIndex,
+                            )
+                          }
                         >
                           <Icon name="view" />
                         </button>