Add an override to useTypeAhead behavior from @floating-ui/react allowing use <input /> in DropDown.Header #1394
Conversation
… using input html types in header of DropDown
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes bring a new capability to the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Out of diff range and nitpick comments (4)
apps/web/content/docs/components/dropdown.mdx (4)
Line range hint
6-6: Use "i.e." instead of "ie.".- (ie. a button) + (i.e. a button)
Line range hint
8-8: Add a comma after "Tailwind CSS".- Tailwind CSS and you can use + Tailwind CSS, and you can use
Line range hint
18-18: Remove "of" for conciseness.- inside of the main `<Dropdown>` component. + inside the main `<Dropdown>` component.
Line range hint
68-68: Add a comma after "trigger element".- trigger element you can use + trigger element, you can use
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apps/web/content/docs/components/dropdown.mdx (1 hunks)
- packages/ui/src/components/Dropdown/Dropdown.stories.tsx (1 hunks)
- packages/ui/src/components/Dropdown/Dropdown.tsx (3 hunks)
Additional Context Used
LanguageTool (4)
apps/web/content/docs/components/dropdown.mdx (4)
Near line 6: The abbreviation “i.e.” (= that is) requires two periods.
Context: ...ems when clicking on a trigger element (ie. a button) that you can use to build dro...
Near line 8: Possible missing comma found.
Context: ... with the utility classes from Tailwind CSS and you can use the custom props from R...
Near line 18: This phrase is redundant. Consider using “inside”.
Context: ...ding child<Dropdown.Item>components inside of the main<Dropdown>component. <Exam...
Near line 68: It seems that a comma is missing.
Context: ...ustom trigger To customize the trigger element you can userenderTriggerproperty. ...
Additional comments not posted (5)
apps/web/content/docs/components/dropdown.mdx (1)
32-33: The added line is clear and provides necessary information about the new prop.packages/ui/src/components/Dropdown/Dropdown.stories.tsx (1)
63-78: The new storyWithUsableInputHeaderis well-implemented and demonstrates the usage of theenableTypeAheadprop effectively.packages/ui/src/components/Dropdown/Dropdown.tsx (3)
50-50: The new propenableTypeAheadis correctly added to theDropdownPropsinterface.
112-112: The default value forenableTypeAheadis correctly set totruein theDropdownComponent.
169-169: TheenableTypeAheadprop is correctly used to enable or disable theuseTypeaheadfunctionality.
…o help speed future reviews.
There was a problem hiding this comment.
Actionable comments posted: 3
Out of diff range and nitpick comments (1)
apps/web/content/docs/components/dropdown.mdx (1)
Line range hint
56-56: Add a comma for better readability.There is a missing comma in the sentence.
- Use the `placement` prop to change the placement of the dropdown by choosing one of the following options: `top`, `right`, `bottom` or `left`. If there is not enough space then the dropdown will be automatically repositioned. + Use the `placement` prop to change the placement of the dropdown by choosing one of the following options: `top`, `right`, `bottom`, or `left`. If there is not enough space, then the dropdown will be automatically repositioned.
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/web/content/docs/components/dropdown.mdx (4 hunks)
Additional Context Used
LanguageTool (1)
apps/web/content/docs/components/dropdown.mdx (1)
Near line 56: Possible missing comma found.
Context: ...ttomorleft`. If there is not enough space then the dropdown will be automatically...
| @@ -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. | |||
There was a problem hiding this comment.
Clarify the description of the dropdown component.
The current description is clear but can be slightly refined for better readability.
- 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.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 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 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. |
There was a problem hiding this comment.
Clarify the description of the default styles and customization options.
The current description is clear but can be slightly refined for better readability.
- 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.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 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. |
| 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. | ||
|
|
There was a problem hiding this comment.
Ensure clarity in the new instruction for complex headers.
The added instruction is clear but can be slightly refined for better readability.
- 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.
+ 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.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 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. | |
| 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. |
This is for issue #1341 preventing the use of
<input />or<TextInput />controls in the header section of a DropDown.This Does add a new property to the
<DropDown />component to prevent default behavior of@floating-ui/react'suseTypeAheadfunctionality. That, according to@floating-ui/reactdocumentation, should not be used for typeable elements.New Prop:
DropdownProps.enableTypeAhead?: booleandefault: trueNon-breaking, to existing behavior. When set to false, disables the 'useTypeAhead' functionality.
I'm uncertain if this is the desired naming of the property.
disableTypeAheadseems more appropriate, but then it's negative use may be more confusing for users.Summary by CodeRabbit
New Features
Documentation
enableTypeAheadto false for<Dropdown>components with complex headers to prevent unintended item search.dropdown.mdxfile regardingenableTypeAheadsetting.