-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(popover): close popover on scroll #3414
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: a1f9298 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThe latest update introduces changes to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SelectComponent
participant PopoverComponent
participant Storybook
User->>SelectComponent: Click to Open Select
SelectComponent->>PopoverComponent: Open Popover
Note right of PopoverComponent: Popover opens
User->>PopoverComponent: Scroll
PopoverComponent->>SelectComponent: Trigger onClose
SelectComponent-->>User: Popover Closes
User->>Storybook: View WithScrollableContainer Story
Storybook->>User: Renders ScrollableContainerTemplate
User->>ScrollableContainerTemplate: Interact with components
Assessment against linked issues
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- .changeset/sweet-flowers-dress.md (1 hunks)
- packages/components/popover/tests/popover.test.tsx (1 hunks)
- packages/components/popover/src/use-aria-popover.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- packages/components/popover/tests/popover.test.tsx
Additional comments not posted (2)
.changeset/sweet-flowers-dress.md (1)
1-5
: Changeset looks good.The changeset correctly indicates a patch update for the
@nextui-org/popover
package and summarizes the change made to close the popover on scroll.packages/components/popover/src/use-aria-popover.ts (1)
105-105
: Conditional assignment ofonClose
looks good.The conditional assignment of the
onClose
function based on theisNonModal
flag ensures that the popover closes correctly in non-modal scenarios.However, ensure that this change is consistent with the rest of the codebase and does not introduce any unintended side effects.
Verification successful
Conditional assignment of
onClose
is consistent with the rest of the codebase.The optional nature and conditional invocation of
onClose
inuse-popover.ts
ensure that the conditional assignment does not introduce any unintended side effects.
onClose
is optional and conditionally invoked, which aligns with the conditional assignment logic.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the `useReactAriaPopover` function to ensure consistency with the new changes. # Test: Search for the function usage. Expect: No inconsistent usage. rg --type typescript $'useReactAriaPopover'Length of output: 77
Script:
#!/bin/bash # Description: Verify the usage of the `useReactAriaPopover` function to ensure consistency with the new changes. # Test: Search for the function usage. Expect: No inconsistent usage. rg --type ts 'useReactAriaPopover'Length of output: 323
Script:
#!/bin/bash # Description: Verify the usage of the `onClose` function in `use-popover.ts` to ensure consistency with the new changes. # Test: Search for the usage of `onClose`. Expect: No inconsistent usage. rg 'onClose' packages/components/popover/src/use-popover.tsLength of output: 143
@wingkwong please add a storybook so I can check this change 🙏🏻 |
@jrgarciadev added |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- packages/components/select/stories/select.stories.tsx (2 hunks)
Additional comments not posted (2)
packages/components/select/stories/select.stories.tsx (2)
630-693
: Ensure proper accessibility.The
ScrollableContainerTemplate
function creates a scrollable form with categories and items. Ensure that the scrollable container and items are accessible to screen readers and keyboard navigation.
907-913
: LGTM! TheWithScrollableContainer
story is correctly configured.The
WithScrollableContainer
export correctly uses theScrollableContainerTemplate
function to render the story.
Closes #3265
📝 Description
following the same approach done by RA team
⛳️ Current behavior (updates)
See the video in original issue
🚀 New behavior
pr3414-demo.webm
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
Code in demostration
Summary by CodeRabbit
New Features
Select
component to display categories and items with emojis.WithScrollableContainer
to demonstrate the scrollable container functionality.Bug Fixes