From 9ade36fb77e35d8a8fa620d771169e4dc2fc6ec6 Mon Sep 17 00:00:00 2001 From: dragonlipz Date: Mon, 13 May 2024 15:28:10 -0500 Subject: [PATCH 1/5] add an override to useTypeAhead behavior from @floating-ui/react when using input html types in header of DropDown --- apps/web/content/docs/components/dropdown.mdx | 2 ++ .../components/Dropdown/Dropdown.stories.tsx | 17 +++++++++++++++++ .../ui/src/components/Dropdown/Dropdown.tsx | 3 +++ 3 files changed, 22 insertions(+) diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx index bd3199d88..6c01bec84 100644 --- a/apps/web/content/docs/components/dropdown.mdx +++ b/apps/web/content/docs/components/dropdown.mdx @@ -29,6 +29,8 @@ Use the `` component to add a divider between the dropdown ite Use the `` 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 `` or `` control, it's necessary to set `enableTypeAhead` to false on the `` to prevent item search interpretation of keystrokes. + ## Dropdown items with icon diff --git a/packages/ui/src/components/Dropdown/Dropdown.stories.tsx b/packages/ui/src/components/Dropdown/Dropdown.stories.tsx index 023558dcf..fa8f38ec6 100644 --- 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: ( + <> + + + + Dashboard + Settings + Earnings + Sign out + + ), +}; + 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 index 7a1ada791..58d476864 100644 --- 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; + enableTypeAhead?: boolean; renderTrigger?: (theme: FlowbiteDropdownTheme) => ReactElement; "data-testid"?: string; } @@ -108,6 +109,7 @@ const DropdownComponent: FC = ({ className, dismissOnClick = true, theme: customTheme = {}, + enableTypeAhead = true, renderTrigger, ...props }) => { @@ -164,6 +166,7 @@ const DropdownComponent: FC = ({ activeIndex, selectedIndex, onMatch: handleTypeaheadMatch, + enabled: enableTypeAhead, }); const { getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({ From ea7bd4847871357b2f30ccecf7948c474eeda625 Mon Sep 17 00:00:00 2001 From: dragonlipz Date: Tue, 14 May 2024 07:55:16 -0500 Subject: [PATCH 2/5] fixing up coderabbitai nitpicks since I made additions to this file to help speed future reviews. --- apps/web/content/docs/components/dropdown.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx index 6c01bec84..c5667d2f2 100644 --- 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 component built with React that allows you to show a list of items when clicking on a trigger element (i.e. a button) that you can use 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 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. 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 `` components inside of the main `` component. +Use this example to create a simple dropdown with a list of menu items by adding child `` components inside the main `` component. @@ -65,7 +65,7 @@ Add a custom `onClick` event handler to the `` component to handl ## Custom trigger -To customize the trigger element you can use `renderTrigger` property. +To customize the trigger element, you can use `renderTrigger` property. From 8de012c55d057ab66aa2a33379573d7ee9bad0e7 Mon Sep 17 00:00:00 2001 From: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com> Date: Wed, 19 Jun 2024 15:16:51 +0300 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- apps/web/content/docs/components/dropdown.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx index c5667d2f2..7d30e2cc9 100644 --- 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 (i.e. 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: @@ -29,8 +29,7 @@ Use the `` component to add a divider between the dropdown ite Use the `` 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 `` or `` control, it's necessary to set `enableTypeAhead` to false on the `` to prevent item search interpretation of keystrokes. - +For more complex headers that include an `` or `` control, set `enableTypeAhead` to `false` on the `` to prevent keystrokes from being interpreted as item searches. ## Dropdown items with icon From 83e31941fa7a1761dd2288e1d63fcd80fc3abded Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 19 Jun 2024 15:34:06 +0300 Subject: [PATCH 4/5] format code --- apps/web/content/docs/components/dropdown.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx index 7d30e2cc9..efe3c56f5 100644 --- a/apps/web/content/docs/components/dropdown.mdx +++ b/apps/web/content/docs/components/dropdown.mdx @@ -30,6 +30,7 @@ Use the `` component to add a divider between the dropdown ite Use the `` 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 `` or `` control, set `enableTypeAhead` to `false` on the `` to prevent keystrokes from being interpreted as item searches. + ## Dropdown items with icon From 85e3dfb28b86a375899e750806e2972330e26b1a Mon Sep 17 00:00:00 2001 From: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com> Date: Wed, 19 Jun 2024 15:35:54 +0300 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- apps/web/content/docs/components/dropdown.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/content/docs/components/dropdown.mdx b/apps/web/content/docs/components/dropdown.mdx index efe3c56f5..645cb6fc9 100644 --- a/apps/web/content/docs/components/dropdown.mdx +++ b/apps/web/content/docs/components/dropdown.mdx @@ -65,7 +65,7 @@ Add a custom `onClick` event handler to the `` 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.