From 5b63917db308ab75dc765de543e97819f16924b7 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Thu, 6 Jul 2023 20:07:45 -0700
Subject: details

---
 extension/react-app/src/components/ComboBox.tsx | 62 +++++++++++++++----------
 1 file changed, 38 insertions(+), 24 deletions(-)

(limited to 'extension/react-app/src/components/ComboBox.tsx')

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 55496fb9..4dab8bcd 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -1,4 +1,9 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
 import { useCombobox } from "downshift";
 import styled from "styled-components";
 import {
@@ -151,22 +156,13 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
   const [highlightedCodeSections, setHighlightedCodeSections] = React.useState(
     props.highlightedCodeSections || []
   );
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setHighlightedCodeSections(props.highlightedCodeSections || []);
   }, [props.highlightedCodeSections]);
 
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    selectedItem,
-    setInputValue,
-  } = useCombobox({
+  const { getInputProps, ...downshiftProps } = useCombobox({
     onInputValueChange({ inputValue }) {
       if (!inputValue) return;
       props.onInputValueChange(inputValue);
@@ -182,6 +178,24 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
     },
   });
 
+  useImperativeHandle(ref, () => downshiftProps, [downshiftProps]);
+
+  useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.focus();
+    const handler = (event: any) => {
+      if (event.data.type === "focusContinueInput") {
+        inputRef.current!.focus();
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  }, [inputRef.current]);
+
   const divRef = React.useRef<HTMLDivElement>(null);
   const ulRef = React.useRef<HTMLUListElement>(null);
   const showAbove = () => {
@@ -255,7 +269,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             </HeaderButtonWithText>
           ))}
       </div>
-      <div className="flex px-2" ref={divRef} hidden={!isOpen}>
+      <div className="flex px-2" ref={divRef} hidden={!downshiftProps.isOpen}>
         <MainTextInput
           disabled={props.disabled}
           placeholder="Ask a question, give instructions, or type '/' to see slash commands"
@@ -277,9 +291,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 (event.nativeEvent as any).preventDownshiftDefault = true;
               } else if (
                 event.key === "Enter" &&
-                (!isOpen || items.length === 0)
+                (!downshiftProps.isOpen || items.length === 0)
               ) {
-                setInputValue("");
+                downshiftProps.setInputValue("");
                 const value = event.currentTarget.value;
                 if (value !== "") {
                   setPositionInHistory(history.length + 1);
@@ -294,7 +308,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 }
                 if (props.onEnter) props.onEnter(event);
               } else if (event.key === "Tab" && items.length > 0) {
-                setInputValue(items[0].name);
+                downshiftProps.setInputValue(items[0].name);
                 event.preventDefault();
               } else if (
                 (event.key === "ArrowUp" || event.key === "ArrowDown") &&
@@ -311,35 +325,35 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 ) {
                   setHistory([...history, event.currentTarget.value]);
                 }
-                setInputValue(history[positionInHistory - 1]);
+                downshiftProps.setInputValue(history[positionInHistory - 1]);
                 setPositionInHistory((prev) => prev - 1);
               } else if (event.key === "ArrowDown") {
                 if (positionInHistory < history.length) {
-                  setInputValue(history[positionInHistory + 1]);
+                  downshiftProps.setInputValue(history[positionInHistory + 1]);
                 }
                 setPositionInHistory((prev) =>
                   Math.min(prev + 1, history.length)
                 );
               }
             },
-            ref: ref as any,
+            ref: inputRef,
           })}
         />
         <Ul
-          {...getMenuProps({
+          {...downshiftProps.getMenuProps({
             ref: ulRef,
           })}
           showAbove={showAbove()}
           ulHeightPixels={ulRef.current?.getBoundingClientRect().height || 0}
         >
-          {isOpen &&
+          {downshiftProps.isOpen &&
             items.map((item, index) => (
               <Li
                 style={{ borderTop: index === 0 ? "none" : undefined }}
                 key={`${item.name}${index}`}
-                {...getItemProps({ item, index })}
-                highlighted={highlightedIndex === index}
-                selected={selectedItem === item}
+                {...downshiftProps.getItemProps({ item, index })}
+                highlighted={downshiftProps.highlightedIndex === index}
+                selected={downshiftProps.selectedItem === item}
               >
                 <span>
                   {item.name}: {item.description}
-- 
cgit v1.2.3-70-g09d2

