fix autocomplete and btn search

smclab · Sep 27, 2023 · f9c2d86 · f9c2d86
1 parent 4a6de1f
commit f9c2d86
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/js-packages/search-frontend/src/components/Search.tsx b/js-packages/search-frontend/src/components/Search.tsx
@@ -69,7 +69,7 @@ export function Search({
   const clickAwayRef = React.useRef<HTMLDivElement | null>(null);
   useClickAway([clickAwayRef], () => setOpenedDropdown(null));
 
-  const [textBtn, setTextBtn] = React.useState("");
+  const [textBtn, setTextBtn] = React.useState<string | undefined>();
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const [adjustedSelection, setAdjustedSelection] = React.useState<{
     selectionStart: number;
@@ -254,7 +254,7 @@ export function Search({
               }
               type="text"
               placeholder={t("search") || "search..."}
-              value={btnSearch ? textBtn : selectionsState.text}
+              value={btnSearch ? textBtn ?? '' : selectionsState.text}
               onChange={(event) => {
                 if (!btnSearch) {
                   selectionsDispatch({
@@ -461,10 +461,18 @@ export function Search({
                 cursor: pointer;
               `}
               onClick={() => {
-                selectionsDispatch({
-                  type: "set-text",
-                  text: textBtn,
-                });
+                if(textBtn === '') {
+                  selectionsDispatch({
+                    type: "reset-search"
+                  });
+                } else {
+                  selectionsDispatch({
+                    type: "set-text",
+                    text: textBtn,
+                    textOnchange: textBtn,
+                  });
+                }
+
                 onDetail(null);
                 setOpenedDropdown(null);
               }}

diff --git a/js-packages/search-frontend/src/components/TokenSelect.tsx b/js-packages/search-frontend/src/components/TokenSelect.tsx
@@ -24,7 +24,7 @@ type TokenSelectProps = {
       optionPosition: number;
     } | null>
   >;
-  setTextBtn: React.Dispatch<React.SetStateAction<string>>;
+  setTextBtn: React.Dispatch<React.SetStateAction<string | undefined>>;
 };
 export function TokenSelect({
   span,
@@ -248,7 +248,10 @@ function getTokenLabel(token: AnalysisToken) {
       return token.entityName;
     case "TEXT":
       return token.value;
+    case "AUTOCOMPLETE":
+      return token.value;
   }
+  return token.value;
 }
 
 function FactoryTokenType({

diff --git a/js-packages/search-frontend/src/components/useSelections.tsx b/js-packages/search-frontend/src/components/useSelections.tsx
@@ -65,6 +65,7 @@ const initial: SelectionsState = {
 
 export type SelectionsAction =
   | { type: "set-text"; text?: string; textOnchange?: string }
+  | { type: "reset-search" }
   | {
       type: "set-selection";
       replaceText: boolean;
@@ -116,12 +117,19 @@ function reducer(
         text: action.text || state.text || "",
         textOnChange: action.textOnchange || state.textOnChange || "",
         selection: shiftSelection(
-          state.textOnChange || "",
+          state.textOnChange ?? "",
           action.textOnchange || state.textOnChange || "",
           state.selection,
         ),
       };
     }
+    case "reset-search" : {
+      return {
+        text: '',
+        textOnChange: '',
+        selection: []
+      }
+    }
     case "set-selection": {
       const { text, selection } = (() => {
         if (