DropdownButtons need an overhaul.

[mtscout6]

I know there are a lot of problems with the DropdownButton, which I hope to remedy soon. I know I'll have some time to work on them next week, but I can't guarantee a delivery date. I'm mainly creating this issue to aggregate all the dropdown issues in one place.

• Close DropdownButton with children without onSelect #195
• Add a way to pass className to DropdownMenu through DropdownButton #230
• DropdownMenu with ModalTrigger'd MenuItem #243
• Tabs, Pager and DropdownButton mess with my hash router #250
• DropdownButton set props to it's DropdownMenu #253
• ButtonToolbar order messed if using DropdownButtons #299
• Can't access DropdownButton instance by ref #303
• dropdown menus #368
• DropdownStateMixin: return early if the target has been detached #398
• Enable hiding of drop down menu when a MenuItem with a href is clicked #411
• Navbar dropdowns in collapsed state #421
• Dropdown onSelect must be assigned in order for dropdown to close when item is selected #456
• Keep active onclick behaviour of DropdownButton #458
• onClick, onSelect ignored for DropdownButton #470
• Tabs with dropdowns in nav #100
• dropdownbutton in modal: esc closes modal when menu is open #486
• When will the onclick event be added back to DropdownButton? #522
• Specifying props for nested anchor components #629

Notes as per W3C WAI-ARIA Spec:

• When presenting the menu, ensure that it is completely visible on screen.
• Keyboard navigation. Should resolve [fixed] Keyboard traversing on DropdownMenu #588
  • Space or Enter - With focus on the button pressing Space or Enter will toggle the display of the drop-down menu. Focus remains on the button.
  • Down Arrow
    • With focus on the button and no drop-down menu displayed, pressing Down Arrow will open the drop-down menu and move focus into the menu and onto the first menu item.
    • With focus on the button and the drop-down menu open, pressing Down Arrow will move focus into the menu onto the first menu item.
  • Up and Down Arrow
    • With focus on the drop-down menu, the Up and Down Arrow keys move focus within the menu items, "wrapping" at the top and bottom.
  • Escape
    • With focus on the drop-down menu, pressing Escape closes the menu and returns focus to the button. Resolves dropdownbutton in modal: esc closes modal when menu is open #486
  • Tab
    • With focus on the button pressing the Tab key will take the user to the next tab focusable item on the page.
    • With focus on the drop-down menu, pressing the Tab key will take the user to the next tab focusable item on the page. Note that this may be difficult to achieve on a web page.
    • Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter.
• The menu button itself has a role of button. It is a button so not needed.
• The menu button has an aria-haspopup property, set to true.
• Auto-generate an ID if one is not provided.
  • Ensure that id does not break server -> client rendering (See: Generating random/unique attributes server-side that don't break client-side mounting facebook/react#4000)

Notes per reported issues:

• Honor event handling api discussed in Change calls to e.preventDefault() to allow onClick and onSelect calls to override #419. Should resolve problem with:
  • Close DropdownButton with children without onSelect #195
  • DropdownMenu with ModalTrigger'd MenuItem #243
  • Tabs, Pager and DropdownButton mess with my hash router #250
  • dropdown menus #368
  • Enable hiding of drop down menu when a MenuItem with a href is clicked #411
  • Dropdown onSelect must be assigned in order for dropdown to close when item is selected #456
  • When will the onclick event be added back to DropdownButton? #522
  • Click on MenuItem doesn't hide the dropdown menu? #541
  • Dropdown does not close on menu item select. #573
  • [added] DropdownButton now applies onClick prop to Button #678
• Allow custom className to DropdownMenu. Should resolve Add a way to pass className to DropdownMenu through DropdownButton #230, DropdownButton set props to it's DropdownMenu #253, related to Support adding button class to DropdownButton #595
• Allow open/closed state to be managed through props. Should resolve Can't access DropdownButton instance by ref #303
• Allow a Dropdown within a Dropdown. Should resolve DropdownStateMixin: return early if the target has been detached #398 Not supported in Bootstrap 3. See: WIP: Bootstrap 3 twbs/bootstrap#6342
• Dropdown should work within a collapsed Navbar. Should resolve Navbar dropdowns in collapsed state #421, and Can't split Navbar elements #700
• Allow Custom Dropdown Menus aside from the default DropdownMenu. Should resolve onClick, onSelect ignored for DropdownButton #470 (Still in discussion)
• Allow to work with tabs. Should resolve Tabs with dropdowns in nav #100
  • Looks like this is dependent on a number of components updating their onSelect event signatures per Change calls to e.preventDefault() to allow onClick and onSelect calls to override #419. This will not likely land in the first release of the dropdown re-write. Sorry @mathieumg it will come at some point though.
• Allow option to open on hover. Should resolve Implement openOnHover attribute for DropDownButton #568
  • Add documentation that it would not be good for accessibility standards.
• Close when clicking outside component. Should resolve Dropdown button not closing when clicking outside it #615
• MenuItem has disabled prop. Resolves Disable MenuItem #246, and [added] property disabled on MenuItem #606
• passing the props download, media, ping, rel, type etc (applicable for <a>) down to anchor Specifying props for nested anchor components #629

Existing features that should still be supported:

• pullRight
• dropup
• noCaret
• DropdownButton onClick event handler
• bsSize
• bsStyle

Issues I Need to dig into more to understand completely:

• ButtonToolbar order messed if using DropdownButtons #299
• Keep active onclick behaviour of DropdownButton #458

twbs/bootstrap#15263 - for reference. (Applies some Aria roles I hadn't considered up till now)

[manveru]

I'm not sure if there's a bug for this yet, but nesting dropdowns results in really broken menus.

[mtscout6]

Thanks @manveru I will take that into consideration.

[mtscout6]

For those of you following this issue, I have started on this though I don't have anything of note to push yet. I should get a little bit more time this week to work on this issue.

[mtscout6]

@manveru Support for sub menus was dropped in Bootstrap 3 so I don't think we will be including it here. So, you'll need to have your own custom component to do this. There is a good solution proposed on StackOverflow.

I am thinking about allowing for a CustomDropdownMenu as outlined in #470, which would be a great extensibility point for you to add this feature to your project. I'm still fleshing that out though so hopefully that ends up working out.

[mtscout6]

createChainedFunction cleanup: From @jtenner on gitter

[AlexKVal]

I've edited the first message:

• Added Specifying props for nested anchor components #629 to the list of issues
• Added to the Notes per reported issues: passing the props download, media, ping, rel, type etc (applicable for <a>) down to anchor #629

[MatthewHerbst]

Can you please clarify if this is taking into account the root cause of #368 ?

I currently have the following React render call for my Nav component:

render: function () {
    var projectMenuItemLinks = this.state.projects.map(function(project, i) {
      return (
        <MenuItemLink
          key={i}
          eventKey={'\'' + (i + 1) + '\''}
          to='validate'
          params={{projectId: project.id}}
        >
          {project.name}
        </MenuItemLink>
      );
    });

    return (
      <Navbar brand='My Project' inverse toggleNavKey={0}>
        <Nav right eventKey={0}> {}
          <NavItemLink eventKey={1} to='home' params={{}}>Home</NavItemLink>
          <DropdownButton eventKey={2} title='Projects'>
            {projectMenuItemLinks}
          </DropdownButton>
          <NavItemLink eventKey={3} to='leaderboard' params={{}}>Leaderboard</NavItemLink>
          <NavItemLink eventKey={4} to='profile' params={{}}>Profile</NavItemLink>
        </Nav>
      </Navbar>
    );
  }

This is using react-bootstrap for everything except the MenuItemLink which is a wrapper around MenuItem created by react-router-boostrap.

When selecting one of the links from the dropdown, I would like the dropdown to close (in addition to the page navigation). Do/will I need to specify an onSelect as was being discussed in #368?

I was also taking a look at https://rackt.github.io/react-router/#Transition, but it's not obvious to me how to integrate it with react-router-bootstrap since I don't have direct access to set/remove the "open" class.

[mtscout6]

@MatthewHerbst yes the changes in the dropdown-revisited branch which is PR #1096 should fix the underlying problem. Though we are investigating an alternative approach that will be easier to work with. So, once #1096 is merged we'll need to update the react-router-bootstrap project to fix the problem you're describing.

[MatthewHerbst]

@mtscout6 awesome, thanks for the update!