dropdown, adding "open" to body for append-to-body has side effects

[jaydiablo]

This was mentioned in #4240. With the changes made to the append-to-body dropdowns in 0.13.4 (specifically adding the class "open" to the body element for these dropdowns), other components on the page may be affected, particularly in a bootstrap heavy application.

In my case, I'm using dangrossman's date range picker: https://github.com/dangrossman/bootstrap-daterangepicker

Here's a plunkr demonstrating the issue:

http://plnkr.co/edit/5QoR6ZAgZZcORpLWghFu?p=preview

If you click on the append-to-body dropdown there, you'll notice that the date range picker opens as well. I believe it only happens if the date range picker hasn't been opened by clicking on it yet.

This happens because bootstrap has this defined for .open > .dropdown-menu:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_dropdowns.scss#L121

The date range picker is appended to body as well, so matches that selector (and has the dropdown-menu class defined on it). This might be fixable via user-land CSS, but overall I think adding the "open" class is too general in an application that makes use of bootstrap compatible components.

I don't know if it's possible to apply this "open" class to a different element, or possibly even store the dropdowns in a container that gets the class change. That would probably be ideal.

However, if that's not possible, would it be possible to be able to specify what class is used? I noticed that "open" is defined in a constant here:

https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L3

Could the library be modified so it's possible to define what this class is, perhaps through a provider?

[wesleycho]

Hmm, I'm thinking maybe we should revert bf63cef - thoughts @Foxandxss ?

[Foxandxss]

What I am thinking that all the logic for append to body is done in a very complicated way and full of weird side effects.

If we revert that, we get the previous issue again. Uhm.

[jaydiablo]

I was able to resolve this with user land CSS:

.open > .daterangepicker {
  display: none;
}

As the JS adds "display: block" to the element directly when it's opened through its own click (and then adds "display: none" to the element directly when it's closed, which is why you don't see it open with the dropdown after it's been opened directly).

I'll keep an eye out for other issues regarding the .open class not playing nicely with other components though. I don't think we're using much else that would react to that, but I haven't tested everything.

[wesleycho]

@Foxandxss I think that is ok if that issue comes back - maybe a better solution would be to allow a custom class to be added to the body tag for an open dropdown. There were a few complaints about this due to the high level CSS that the dropdown class addition adds.

[wesleycho]

Just a note, I have reverted the previous breaking commit with 6f9f1fc - we need to implement this feature with allowing a custom open class on body.

[Jacquelin]

Hi,

I encounter a similar problem. The difference is the use of class "dropdown" in body. This css Class is set to "position: relative;"
I use ui angular layout (https://angular-ui.github.io/ui-layout/, an AngularUI lib !). This library uses a lot of absolute position ... Result, I have a blank page.

For now I commented the line (body.addClass ('dropdown')) and it's works. Since a problem is raised here regarding the dropdown / appendToBody / Class, I thought you aware of my problem. I hope this could help you

PS : Thx for this lib !!

[wesleycho]

Upgrading to 0.14.0 (released within the past hour) fixes the dropdown class in the body tag issue - I reverted that.