feat: remove trigger component

FuelLabs · Apr 30, 2024 · 9181cfb · 9181cfb
1 parent fcac965
commit 9181cfb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 34 deletions.
diff --git a/packages/ui/src/components/ComboBox/ComboBox.stories.tsx b/packages/ui/src/components/ComboBox/ComboBox.stories.tsx
@@ -33,7 +33,6 @@ function ComboBoxStory(args: Pick<ComboBoxProps, 'debounce'>) {
       <ComboBox.Input>
         <ComboBox.InputField ref={inputRef} placeholder="Type a fruit name" />
       </ComboBox.Input>
-      <ComboBox.Trigger />
       <ComboBox.Content />
     </ComboBox>
   );

diff --git a/packages/ui/src/components/ComboBox/ComboBox.tsx b/packages/ui/src/components/ComboBox/ComboBox.tsx
@@ -191,18 +191,6 @@ export const ComboBoxInput = createComponent<ComboBoxInputProps, typeof Input>({
   baseElement: Input,
 });
 
-export const ComboBoxTrigger = createComponent<{}, typeof Popover.Trigger>({
-  id: 'ComboBoxTrigger',
-  baseElement: Popover.Trigger,
-  render: (Root, { ...props }) => {
-    return (
-      <Root {...props}>
-        <div />
-      </Root>
-    );
-  },
-});
-
 export const ComboBoxInputField = createComponent<
   ComboBoxInputFieldProps,
   typeof Input.Field
@@ -268,27 +256,33 @@ export const ComboBoxContent = createComponent<
       useComboBoxContext();
 
     return (
-      <Popover.Content
-        // Goes against accessibility rules but otherwise we'd be constantly losing focus on the input
-        onOpenAutoFocus={(e) => e.preventDefault()}
-      >
-        <Flex
-          className={className}
-          direction="column"
-          gap="2"
-          style={style}
-          {...props}
+      <>
+        {/* Popover uses the trigger's position and container to determine the position and size of the content window. */}
+        <Popover.Trigger>
+          <div />
+        </Popover.Trigger>
+        <Popover.Content
+          // Goes against accessibility rules but otherwise we'd be constantly losing focus on the input
+          onOpenAutoFocus={(e) => e.preventDefault()}
         >
-          {filteredSuggestions.map((suggestion: string) => (
-            <ComboBoxItem
-              key={itemNameSelector?.(suggestion) ?? (suggestion as string)}
-              suggestion={suggestion}
-              itemNameSelector={itemNameSelector}
-              onItemSelected={handleSuggestionClick}
-            />
-          ))}
-        </Flex>
-      </Popover.Content>
+          <Flex
+            className={className}
+            direction="column"
+            gap="2"
+            style={style}
+            {...props}
+          >
+            {filteredSuggestions.map((suggestion: string) => (
+              <ComboBoxItem
+                key={itemNameSelector?.(suggestion) ?? (suggestion as string)}
+                suggestion={suggestion}
+                itemNameSelector={itemNameSelector}
+                onItemSelected={handleSuggestionClick}
+              />
+            ))}
+          </Flex>
+        </Popover.Content>
+      </>
     );
   },
 });
@@ -300,6 +294,5 @@ export const ComboBox = withNamespace(
     Content: ComboBoxContent,
     Input: ComboBoxInput,
     InputField: ComboBoxInputField,
-    Trigger: ComboBoxTrigger,
   },
 );