Skip to content
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

Add Sub item functionality to Popover #3140

Open
sekeidesign opened this issue Sep 25, 2024 · 0 comments
Open

Add Sub item functionality to Popover #3140

sekeidesign opened this issue Sep 25, 2024 · 0 comments

Comments

@sekeidesign
Copy link

Feature request

Overview

We recently replaced our own Popover component to be built on top of react-dropdown-menu instead of react-popover since the two are almost identical, but the DropdownMenu also supports Submenus which is definitely something we want.

The migration was essentially free since both of these components share the vast majority of functionality and props, with the exception of onOpenAutoFocus. It seems that controlling the focus might be a critical part of how the dropdown menu works, so instead I suspect it might be a better solution to add the same Sub component to the Popover package.

It's not great for my team to support, document, and maintain two separate components that have almost entirely the same functionality just for the ability to sometimes add sub menus, but because onOpenAutoFocus is controlled by the Dropdown Menu and not available as a prop, it doesn't work for all of our use cases.

Example:

CleanShot.2024-09-18.at.14.33.53.mp4
// ComboBox.tsx

import * as RadixPopover from '@radix-ui/react-popover'
...
<RadixPopover.Trigger>
    <Input 
        onFocus={setIsOpen(true)} 
        onBlur={setIsOpen(false)}
    />
</RadixPopover.Trigger>

<RadixPopover.Content 
    onOpenAutoFocus={event => {
        if (preventAutoFocus) {
            event.preventDefault()
        }
    }}
>
...

This example works well for our combobox, but doesn't allow us to use this same component for other use cases where sub menus are needed.

Examples in other libraries

Radix already supports this in the Dropdown Menu component:
https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub

Who does this impact? Who is this for?

Anyone who uses Popover. The functionality between the two is so similar that I find it confusing they're even separate components to begin with.
The dropdown menu doesn't quite feel like a primitive, considering it has higher order patterns like checkboxes and radio groups built into it which area already available as primitives.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant