add an override to useTypeAhead behavior from @floating-ui/react when…

… using input html types in header of DropDown
themesberg · May 13, 2024 · 9ade36f · 9ade36f
1 parent 2afa3c8
commit 9ade36f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx
@@ -29,6 +29,8 @@ Use the `<Dropdown.Divider>` component to add a divider between the dropdown ite
 
 Use the `<Dropdown.Header>` component to add a header to the dropdown. You can use this to add a user profile image and name, for example.
 
+For more complex headers that include an `<input>` or `<TextInput>` control, it's necessary to set `enableTypeAhead` to false on the `<Dropdown>` to prevent item search interpretation of keystrokes.
+
 <Example name="dropdown.header" />
 
 ## Dropdown items with icon

diff --git a/packages/ui/src/components/Dropdown/Dropdown.stories.tsx b/packages/ui/src/components/Dropdown/Dropdown.stories.tsx
@@ -60,6 +60,23 @@ WithHeader.args = {
   ),
 };
 
+export const WithUsableInputHeader = Template.bind({});
+WithUsableInputHeader.storyName = "With usable input header";
+WithUsableInputHeader.args = {
+  enableTypeAhead: false,
+  children: (
+    <>
+      <Dropdown.Header>
+        <input className="text-black" onChange={action("onChange")} />
+      </Dropdown.Header>
+      <Dropdown.Item>Dashboard</Dropdown.Item>
+      <Dropdown.Item>Settings</Dropdown.Item>
+      <Dropdown.Item>Earnings</Dropdown.Item>
+      <Dropdown.Item>Sign out</Dropdown.Item>
+    </>
+  ),
+};
+
 export const Inline = Template.bind({});
 Inline.args = {
   inline: true,

diff --git a/packages/ui/src/components/Dropdown/Dropdown.tsx b/packages/ui/src/components/Dropdown/Dropdown.tsx
@@ -47,6 +47,7 @@ export interface DropdownProps extends Pick<FloatingProps, "placement" | "trigge
   inline?: boolean;
   label: ReactNode;
   theme?: DeepPartial<FlowbiteDropdownTheme>;
+  enableTypeAhead?: boolean;
   renderTrigger?: (theme: FlowbiteDropdownTheme) => ReactElement;
   "data-testid"?: string;
 }
@@ -108,6 +109,7 @@ const DropdownComponent: FC<DropdownProps> = ({
   className,
   dismissOnClick = true,
   theme: customTheme = {},
+  enableTypeAhead = true,
   renderTrigger,
   ...props
 }) => {
@@ -164,6 +166,7 @@ const DropdownComponent: FC<DropdownProps> = ({
     activeIndex,
     selectedIndex,
     onMatch: handleTypeaheadMatch,
+    enabled: enableTypeAhead,
   });
 
   const { getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({