streakyc / react-menu-list Goto Github PK

It is not possible to add any styles or classes to the very first wrapper of dropdown menu. I`m having an issue, when I need to change menu zIndex, because it is hidden by page contents

E.g. this one. Not being able to (at least) provide a class (a component would be better) results in having to write (not ideal) > div selectors to target this element in CSS. The main issue being that the submenu aligns to this elements and so any margin or padding on the parent causes the submenu to overlap.

When I click MenuButton at first, menu popup will be auto closed. And then I click MenuButton again, it will be working well. But I don't know where trigger onWillClose function.
And could you please give a detailed demo for ButtonComponent of MenuButton. Thanks.
My coding as below,
<MenuButton menu={ <div className='multi-level-menu-list-container'> { this.renderSub() } </div> } onWillOpen={ this.onWillOpen } onDidOpen={ this.onDidOpen } onWillClose={ this.onWillClose } > <Button type='button'> Btn </Button> </MenuButton>

Toggle does not work, react 16.6.1
`
class Header extends React.PureComponent {
render() {

    return (
        <div>
            <button onClick={() => {this.menuButton.toggle();}} >
                toggle menu
            </button>

            <MenuButton
                ref={(elem) => { this.menuButton = elem; }}
                menu={
                    <Dropdown>
                        <MenuList>
                            <LI>Mercury</LI>
                            <LI>Neptune</LI>
                            <LI>Neptune</LI>
                            <LI>Neptune</LI>
                            <LI>Neptune</LI>
                        </MenuList>
                    </Dropdown>
                }
            >
                Menu Button
            </MenuButton>
        </div>
    );
}

}`

I'd like to keep the menu open after an item is chosen, so I can build a multi-select menu. I can't tell if this is supported or not. Is there a way to configure it to allow this?

Thanks!

Code sandbox Link: https://codesandbox.io/s/eloquent-browser-mzpok?file=/src/App.

steps to reproduce the issue:

1. Focus on menu list
2. Click on down arrow key to navigate the subMenuItem
3. Click on Right arrow key to open sub menu,

Issue: Getting the error "Uncaught error at Object.onRightPushed"

Please refer to the attached screen shots

Note1: it's working file with mouse hover
Note2: it's reproducible with older version "6.1.1" as well

Hello and thank you for this library!

I have built a menu with submenus using react-menu-list which contains links to other places on my web app. I would like these links to be visible to google crawlers, but at present the menu doesn't exist in the DOM until it's clicked.

Could there be an option so that menu and submenus are always rendered to the DOM, albeit with display:none when the menu is closed? (I.e. same as how reactstrap renders dropdowns.)

(FYI my submenus are only one level: i.e. the parent menu has multiple submenus, but no submenu has submenus.)

Perhaps I could have a go at this myself, but I'd greatly appreciate any insight you might have.

Error: Should not happen: portalEl already in page

I have copied the example code into my files and facing this error in nextjs latest version

Hello! I found that you use ButtonComponent prop instead of buttonComponent that I and many others would expect. Is it on purpose?

I've a list that runs past the length of the screen, and I can't get any sort of scroll functionality to work as I don't have access to the parent div's class:

Is there a way to allow me to access that? I'd thought "openedClassName" would do it, but it only affects the menu button and not the generated menu. Adding a height style to the Dropdown doesn't work. If there's a better solution to allow access to the items that are off the page, I'd love to hear that as well.

At Streak, we have a number of usages of react-menu-list@7's MenuButton used with MenuItem | Dropdown | MenuList from react-menu-list@6. Is this something we want to officially support or move away from?

I think the current API for making a dropdown opened by a menubutton is suboptimal for a few reasons:

• A user may think to themselves "I want a dropdown opened by a button. Okay, step 1 is that I need to find a 'dropdown' component, and step 2 is that I need to find a 'button' component to use with it." ReactMenuList currently abstracts things oppositely: The user needs to use the MenuButton component, which handles opening and positioning of a dropdown, and then the user passes a Dropdown component to MenuButton's menu prop. If the user reaches for a "dropdown" component first before thinking about buttons, then they're going to get lost.
• I'm not really happy with MenuButton's ButtonComponent prop. Passing components in a prop is awkward and unintuitive:
  • It can encourage more components to be created than necessary.
  • Users often don't realize how they can pass extra props to the ButtonComponent (define a stateless functional component within the main component which passes some props from the main component to the button component, and pass that as ButtonComponent instead).
  • If a user passes an inline SFC as ButtonComponent then it will re-render from scratch on each render and lose state.

Some things to keep in mind for a new API for dropdowns:

• The API should be naturally usable (or implementable) by SubMenuItem too.
• Can the Dropdown API be split from the ReactMenuList project? (Should it be part of ReactFloatAnchor?) Is this Dropdown API actually an improvement over ReactFloatAnchor?
• Could the new API make use of React Hooks instead? Can React Hooks avoid the need for component or render props here?

With [email protected] and [email protected], it seems like MenuItem's onItemChosen's event parameter honor a e.stopPropagation() call like I'd expect.

Here's an example https://codesandbox.io/s/cranky-rui-g31gq7?file=/src/App.tsx

Currently, MenuButton closes as soon as the focus leaves the button. However, this doesn't work out if you have a text field (like a search box) inside of the dropdown menu that you want to be focused and usable.

MenuButton works pretty simply and dependably; I'm not really sure I want to change the blur-closes-dropdown behavior of it. Maybe another component like MenuButton should be made that closes when it sees something outside of it get clicked or focused. It also needs a name. FocusableDropdownMenuButton? Not great.

Should investigate what other websites and menu libraries do. From experimenting, Gmail does appear to have two different types of menu buttons like this, which is reassuring.

Can you add the accessKey and TabIndex support to MenuButton and MenuItem, it helps user to navigate through the keyboard as you already handel the key navigation.

This makes is harder to use type-safe event handlers.