Cannot re-open the drop-down list by one click

Question

I have a webpage made by angularjs and bootstrap, but not ui-bootstrap.

There is a drop-down list and an iframe. The problem is that when the drop-down list is open, clicking on the iframe will not automatically close the drop-down list.

I followed this answer and added the follows:

$(window).on('blur',function() { $('.dropdown-toggle').parent().removeClass('open'); } );

Now, clicking on the iframe does close the drop-down list. However, just after closing, clicking on the drop-down button will NOT re-open the list; we have to click on somewhere else than the iframe or click on the drop-down button once, then clicking again on the drop-down button opens the list.

Sorry that I cannot reproduce the problem in a playground, but it seems a common problem that "only the second click opens a drop-down list". I tried to remove data-toggle="dropdown", but it did not help.

Does anyone know what I could try to fix the problem?

It might be because you need to the outer page focus before touch the dropdown again. If I am understanding the problem correctly. But an idea to try is wrapping the dropdown in an ng-if and when clicking the iframe toggle the if statement off then on this will re-render the dropdown to its natural state. — floor, Apr 19 '17 at 03:30
I agree that "you need to the outer page focus before touch the dropdown again", because even though we click on the iframe area many times, we have to click on somewhere else before clicking on the drop-down button to re-open it. However, I don't understand what you say about `ng-if`... — SoftTimur, Apr 19 '17 at 03:39
forget about the ng-if i don't think it will help. More of an alternative to using jqlite — floor, Apr 19 '17 at 03:48
@SoftTimur can you provide more code? because [it works in jsfiddle](http://jsfiddle.net/teleginzhenya/f2ezha8m/2/) — Zhenya Telegin, Apr 23 '17 at 05:51
The problem is that, when I try it on a playground, even my initial code does not have any problem... — SoftTimur, Apr 23 '17 at 05:52
Hi @SoftTimur can you try this `$(document.querySelectorAll('.dropdown-toggle')).parent().removeClass("open")` a bit odd but may help you — Aswin Ramesh, Apr 29 '17 at 18:09

score 0 · Answer 1 · answered Apr 23 '17 at 05:28

0

you can try a more "bootstrap" solution with

$(window).on('blur',function() { 
  if($('.dropdown-toggle').parent().hasClass('open')){
    $(".dropdown-toggle").dropdown("toggle");
  }
});

this will close the element if openned and let the dropdown as closed for the next click to fire the open.

answered Apr 23 '17 at 05:28

xploshioOn

4,035
2
28
37

With this code, when I click on the iframe, the drop-down list will not close automatically... – SoftTimur Apr 23 '17 at 05:35

score 0 · Accepted Answer · edited Apr 28 '17 at 08:15

I finally got it...

Before, I used the following, and did NOT use bootstrap.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>.

To avoid the problem mentioned in this question, I need to use:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>

Note that, bootstrap.js is absolutely needed, and 0.11.0 is not enough for ui-bootstrap-tpls.js.

(* By the way, I had previously a bug (unfortunately I don't remember clearly), which was due to a not higher enough version ui-bootstrap-tpls.js. Really need to keep in mind that ui-bootstrap-tpls.js may be the issue when you meet a tricky js bug. *)

And this is the first sentence: I have a webpage made by angularjs and bootstrap, but not ui-bootstrap. I also wonder how your code could work on a playground. — Gerard, Apr 24 '17 at 22:21

Cannot re-open the drop-down list by one click

2 Answers2

Linked