Uncontrolled Dropdown

[ronaklalwaniii]

Hello,

I want to create a multilevel uncontrolled dropdown menu (dropdown inside of dropdown) that opens on hover, how can I achieve that?

Regards

[TheSharpieOne]

See twbs/bootstrap#21026 and twbs/bootstrap#16387 (comment)

It is not really possible with UncontrolledDropdown since the parent dropdowns do not know when to close when a child dropdown's item is selected. See this demo: https://stackblitz.com/edit/reactstrap-v8-fiulgx?file=Example.js

You'd need to use Dropdown itself to control the isOpen state of the dropdowns to close them all when an item is clicked within a nested dropdown.

There are also some styling issues, such as the outline and dropdown-item's padding not being clickable to toggle the nested dropdown. Those can be fixed with some custom styles.

We do support nested/multiple modals which bootstrap does not support. If someone wanted to open a PR which supports nested dropdowns, I would consider it. I imagine you'd have to use react's context api to provide the children with the parent's toggle function so that it could be called when the child calls its toggle. This would make it recursive when closing.