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 ↗︎
|
|
Warning Rate limit exceeded@SutuSebastian has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 50 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe recent updates to the Changes
Poem
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...
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
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
apps/web/content/docs/components/dropdown.mdx
[uncategorized] ~10-~10: A comma might be missing here. (AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
Context: ...m props from React. To start using the component make sure that you have imported it fro...
[uncategorized] ~67-~67: You might be missing the article “the” here. (AI_EN_LECTOR_MISSING_DETERMINER_THE)
Context: ...tomize the trigger element, you can userenderTriggerproperty. <Example name=...
Additional comments not posted (4)
apps/web/content/docs/components/dropdown.mdx (4)
6-6: The updated description is clearer and more precise.
8-8: The revised description of default styles is more concise and easier to understand.
18-18: The instruction for creating a simple dropdown is well-phrased and clear.
32-32: The instruction for disablingenableTypeAheadwhen using<input>or<TextInput>in the dropdown header is crucial for proper functionality and is clearly explained.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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
enableTypeAheadto false for complex headers with<input>or<TextInput>controls.