Nested dropdowns

[Yankovsky]

Any plans to support nested dropdowns? I made example jsfiddle. Currently, only one dropdown can be open at a time due to dropdownService's open method.
I tried to make a use of require: '^dropdown' in child dropdown directive, but it is returning child dropdown controller, not his parent because of bug.
So, any ideas how to handle this situation?
Thank you.

[ileathan]

If you get this working please let us know :D

[imevro]

Anyone?

[Roniakia]

Plz

[Roniakia]

Anyone?

[imevro]

Anyone?

[dmitriz]

Here is a pure CSS implementation if that helps:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

[RobJacobs]

@dmitriz Nice find, thanks for sharing.

[sebastianhenneberg]

I added nesting capabilities to the dropdowns and created a PR. Please check out the referenced PR #3776 or grab my monkey-patch. Any feedback is highly appreciated!

Edit: The monkey-patch just works on the most-recent release 0.13.0 because it requires getAutoClose and getElementto be defined on the dropdown directive controller (a50f112).

[wesleycho]

I put some more thought about this, and I am making the decision to reject this feature request - this adds complexity for what is a bad UX, which is a net negative for the project.

[shyamal890]

@wesleycho WHY?!!! This is very much needed. There are use cases where you would need a dropdown inside a dropdown.

[wesleycho]

@shyamal890 the amount of code required to support this, which will have lots of side effects, is not justified with why this is a valid UI/UX for the user.

[azahreba]

Actually, I fixed it in JS, without any tricks with CSS or HTML.
azahreba@4f01c59 (a simple factory pattern is used there).
Now there are 2 failed unit-tests and that's the question - how to fix them.
I've tried to reproduce those unit tests on the real app, and everything is working properly with class="open".

[Mike-Loffland]

@sebastianhenneberg Thanks for the monkey patch... works like a charm.

If you're minifying... here is the same monkey patch with $inject property annotation in place.

[notbrain]

@wesleycho A shame this is outright considered bad UX - the main use case I am trying to support is a Typeahead inside of a dropdown, not another "typical" dropdown for more menu access. Typeahead itself uses a dropdown, and is not a "bad UX" per se if used inside of a dropdown, and would be particularly useful.

[icfantv]

@notbrain, we've run this by several UX people and devs and we all think it's just bad UX and weird - read: not normal UX behavior. as such, this is not something we are going to support. Also, it looks borderline awful when open.

If you could talk about what you want from a user's perspective, perhaps we could help you come up with a better design/workflow.

[notbrain]

@icfantv Not a huge deal, but I just created a sort-of dropdown to house something like a contextual panel that would have a form on it...on the form are 4 fields, two typeaheads and 2 datepickers. The datepickers work fine since they are add to body, but since the typeaheads are position-sensitive they needed to be inline, in which case they interfered with the wrapping dropdown.

In the end the initial wrapper didn't need to be a dropdown, so I just did a custom hide/show panel to house the form. It's really not so bad since it's a different mode (text input) and the only reason the typeahead didn't work is because it itself uses a dropdown for implementation:

[RobJacobs]

This looks more like a popover with a nested typeahead which is supported.

[icfantv]

@notbrain, i'm glad you got something working. you might take a gander at what @RobJacobs suggested since dropdowns are usually used for navigation or actions.

[notbrain]

@RobJacobs thanks, should have done my homework to have seen that. Sometimes tunnel vision sets in when you get comfortable with certain controls.

[alirezamirian]

The original gist from @sebastianhenneberg doen't work when dropdown-append-to-body is set (because it calls getElement() instead of getDropdownElement() to look for child dropdowns, which fails when dropdown menu is appended to body instead of dropdown itself).
I've forked and fixed it here: https://gist.github.com/alirezamirian/b6cc3d5bc421d6e5338c002acde5e5bc

I also change it to decorate uibDropdownService instead of dropdownService

[ileathan]

I solved the problem by just home baking it dont even remember how or id mention...

Why is this marked closed anyway? Too much code to implement? Hmm... but that guy did it right after?
Hmmmm... oh well unsubscribed.