fix: open close behavior of input

FuelLabs · Sep 17, 2024 · c65dfb0 · c65dfb0
1 parent b1ba75b
commit c65dfb0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 37 deletions.
diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchInput.tsx
@@ -277,22 +277,27 @@ export function SearchInput({
   const [value, setValue] = useState<string>(initialValue as string);
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const { pending } = useFormStatus();
   const { dropdownRef } = useContext(SearchContext);
-  const openDropdown = isOpen && !pending && !!searchResult;
+  const openDropdown = hasSubmitted
+    ? !pending
+    : isOpen && !pending && !!searchResult;
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     setValue(event.target.value);
   }
 
   function handleSubmit() {
     setIsOpen(true);
+    setHasSubmitted(true);
   }
 
   function close() {
     setIsOpen(false);
+    setHasSubmitted(false);
   }
 
   function handleClear() {
@@ -308,6 +313,16 @@ export function SearchInput({
     setIsFocused(false);
   }
 
+  function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      (e.target as HTMLFormElement).form?.dispatchEvent(
+        new Event('submit', { cancelable: true, bubbles: true }),
+      );
+      handleSubmit();
+    }
+  }
+
   return (
     <div className="relative">
       <VStack
@@ -316,7 +331,7 @@ export function SearchInput({
         data-active={isFocused || openDropdown}
       >
         <Focus.ArrowNavigator autoFocus={autoFocus}>
-          <div ref={containerRef} className="w-full">
+          <div ref={containerRef} className={classes.inputContainer()}>
             <Input
               {...props}
               ref={inputRef}
@@ -332,46 +347,43 @@ export function SearchInput({
               type="search"
               onFocus={handleFocus}
               onBlur={handleBlur}
-              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault();
-                  (e.target as HTMLFormElement).form?.dispatchEvent(
-                    new Event('submit', { cancelable: true, bubbles: true }),
-                  );
-                  handleSubmit();
-                }
-              }}
+              onKeyDown={onKeyDown}
             >
-              {(isFocused || !openDropdown) && !!value?.length ? (
-                <>
-                  <Input.Slot side="right">
-                    <Tooltip content="Submit">
-                      <IconButton
-                        type="submit"
-                        aria-label="Submit"
-                        icon={IconCheck}
-                        iconColor="text-brand"
-                        variant="link"
-                        className="!ml-0 tablet:ml-2"
-                        isLoading={pending}
-                        onClick={handleSubmit}
-                      />
-                    </Tooltip>
+              <div
+                data-show={isFocused}
+                className={classes.inputActionsContainer()}
+              >
+                <Input.Slot side="right">
+                  <Tooltip content="Submit">
                     <IconButton
-                      aria-label="Clear"
-                      icon={IconX}
-                      iconColor="text-gray-11"
+                      type="submit"
+                      aria-label="Submit"
+                      icon={IconCheck}
+                      iconColor="text-brand"
                       variant="link"
-                      className="m-0"
-                      onClick={handleClear}
+                      className="!ml-0 tablet:ml-2"
+                      isLoading={pending}
+                      onClick={handleSubmit}
                     />
-                  </Input.Slot>
-                </>
-              ) : (
-                <Input.Slot side="right">
-                  <Icon icon={IconSearch} size={16} />
+                  </Tooltip>
+                  <IconButton
+                    aria-label="Clear"
+                    icon={IconX}
+                    iconColor="text-gray-11"
+                    variant="link"
+                    className="m-0"
+                    onClick={handleClear}
+                  />
                 </Input.Slot>
-              )}
+              </div>
+
+              <Input.Slot
+                data-show={!isFocused}
+                side="right"
+                className="[&[data-show=false]]:hidden"
+              >
+                <Icon icon={IconSearch} size={16} />
+              </Input.Slot>
             </Input>
           </div>
         </Focus.ArrowNavigator>

diff --git a/packages/app-explorer/src/systems/Core/components/Search/styles.ts b/packages/app-explorer/src/systems/Core/components/Search/styles.ts
@@ -12,6 +12,7 @@ export const styles = tv({
       '[&[data-active=true]]:z-50',
     ],
     dropdownItem: 'hover:bg-border focus:bg-border cursor-pointer',
+    inputContainer: 'w-full',
     inputWrapper: [
       'outline-none h-[40px] group-[&[data-active=true]]:h-[60px] tablet:group-[&[data-active=true]]:h-[40px]',
       'group-[&[data-active=true]]:rounded-none tablet:group-[&[data-active=true]]:rounded-[var(--text-field-border-radius)] ',
@@ -23,6 +24,8 @@ export const styles = tv({
       'group-[&[data-active=true]]:[&_.rt-TextFieldChrome]:shadow-none',
     ],
     searchSize: 'w-full sm:w-[400px] group-[&[data-active=true]]:w-full',
+    inputActionsContainer:
+      '[&[data-show=false]]:hidden absolute flex items-center h-full right-0 top-0 transform',
     dropdownContent: [
       'mt-[-10px] rounded-t-none shadow-none border border-t-0 border-border',
       '[&[data-active=true]]:border-t-0',