streakyc / react-menu-list Goto Github PK
View Code? Open in Web Editor NEWReact dropdown menu components
License: MIT License
React dropdown menu components
License: MIT License
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:
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.
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:
ButtonComponent
prop. Passing components in a prop is awkward and unintuitive:
Some things to keep in mind for a new API for dropdowns:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.