Add an override to useTypeAhead behavior from @floating-ui/react allo…

…wing use <input /> in DropDown.Header (#1394) * add an override to useTypeAhead behavior from @floating-ui/react when using input html types in header of DropDown * fixing up coderabbitai nitpicks since I made additions to this file to help speed future reviews. * Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * format code * Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: Sutu Sebastian <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: SutuSebastian <[email protected]>
themesberg · Jun 19, 2024 · 7476312 · 7476312
1 parent 50c860e
commit 7476312
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx
@@ -3,9 +3,9 @@ title: React Dropdown - Flowbite
 description: Use the dropdown component to trigger a list of menu items when clicking on an element such as a button or link based on multiple styles, sizes, and placements with React
 ---
 
-The dropdown component is a UI component built with React that allows you to show a list of items when clicking on a trigger element (ie. a button) that you can use to build dropdown menus, lists, and more.
+The dropdown component is a UI element built with React that displays a list of items when a trigger element (e.g., a button) is clicked. You can use it to build dropdown menus, lists, and more.
 
-The default styles are built with the utility classes from Tailwind CSS and you can use the custom props from React to customize the behaviour and positioning of the dropdowns.
+The default styles are built using utility classes from Tailwind CSS. You can customize the behavior and positioning of the dropdowns using custom props from React.
 
 To start using the component make sure that you have imported it from Flowbite React:
 
@@ -15,7 +15,7 @@ import { Dropdown } from "flowbite-react";
 
 ## Default dropdown
 
-Use this example to create a simple dropdown with a list of menu items by adding child `<Dropdown.Item>` components inside of the main `<Dropdown>` component.
+Use this example to create a simple dropdown with a list of menu items by adding child `<Dropdown.Item>` components inside the main `<Dropdown>` component.
 
 <Example name="dropdown.root" />
 
@@ -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, set `enableTypeAhead` to `false` on the `<Dropdown>` to prevent keystrokes from being interpreted as item searches.
+
 <Example name="dropdown.header" />
 
 ## Dropdown items with icon
@@ -63,7 +65,7 @@ Add a custom `onClick` event handler to the `<Dropdown.Item>` component to handl
 
 ## Custom trigger
 
-To customize the trigger element you can use `renderTrigger` property.
+To customize the trigger element, you can use the `renderTrigger` property.
 
 <Example name="dropdown.customTrigger" />
 

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({