Dropdown Toggle is no longer working to close the dropdown.

Guessing others will probably swoop in before I get a chance to get to my desktop, but first thing I would check is your JavaScript console in the developer tools (F12) to see if there are any errors thrown when you try to collapse it.

You might also want to double check any event listeners you've attached to the button. Maybe you have an extra event listener that is re-expanding the drop-down?

So I took a peek at this. I'm not familiar with the plugin you're using, but at a cursory glance, I think the issue is in ical-links.js:

   obj.handleIcalLinksButtonClick = function( event ) {
      $( event.target ).toggleClass( obj.selectors.icalLinksButtonActiveClass );
   };

Select allOpen in new window

If you click on the button text, the event.target is the button text lement, so it toggles the active class on the button text element. If you click on the button arrow, the event.target is now the icon button, so it gets the active class, so now there are multiple elements with the active class keeping the popup open.

The fix might just be to change $(event.target) to specifically be the overall button element.

It closes if you click outside the "box".

Where you wanting it to close by clicking the button again?

Julian, click on the button text, then on the arrow icon in the button, then click off of it. 

Hi,

I'm using this date picker / calendar for my application for many years.
For closing the calendar, i'm using the option autoclose as this is a more userfriendly to my opinion and it save a click
So when user select a date it close the calendar.

autoclose: true

Select allOpen in new window

I don't know Tribe Events calendar but your code use an old datepicker version
So I would first update to the latest version1.9.0 you code is using 1.7.0
https://github.com/uxsolutions/bootstrap-datepicker

I got a few issues trying your code
-empty transparent popup open without the calendar (I would remove this)
-empty transparent popup open when closing the calendar (I would remove this)
-calendar CSS is not userfriendly (I would switch to default calendar CSS and restart the CSS adjustment)

@Gr8gonzo

Julian, click on the button text, then on the arrow icon in the button, then click off of it.

I am not following - 35 degrees (95F) here today - not easy to focus.

If I click on the button (subscribe to calendar) - drop down opens.
Click anywhere on the page - it closes

This seems to be by design. I am trying to establish what the expected / desired behaviour is

@Julian clicking anywhere outside the datepicker is the default option for closing the datepicker.
This can be changed to autoclose true  

Ref https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=close#autoclose

autoclose

Boolean. Default: false
Whether or not to close the datepicker immediately when a date is selected.

autoclose: true

Select allOpen in new window

 

@Julian:

1. Click on the "Subscribe to calendar" text. RESULT: Dropdown opens.
2. With the dropdown still open, click on the little arrow icon. RESULT: No change.
3. Now click anywhere else on the page. RESULT: Dropdown stays open.


Depending on where you click, the event target changes, but the CSS selector is toggling the "active" class on whatever target is chosen. So if you click on the text to open it and accidentally click on some other part of the button to try and close it again, you may accidentally end up adding a second "active" class to a different container element that keeps the dropdown open.

I was doing that but it is intermittent. The results are not always the same. I can do the above and get the box to disappear by clicking outside the box as well - but it is not consistent. Looking at why that is the case.

This is the code that fires on click (as gr8gonzo pointed out)

    obj.handleIcalLinksButtonClick = function( event ) {
        $( event.target ).toggleClass( obj.selectors.icalLinksButtonActiveClass );
    };

Select allOpen in new window

It appears that it fires twice (sometimes) when you click on the down arrow - once for the button and once for the svg in the button.
Occasionally it triggers on the containing div - and then fires once.

Have not had time to look at it in depth but that is what I noticed up till now

The question is - is there another example where this is being used where it works? Is there a sample page?

Wow! You guys have gone to town with this. I LOVE it.

So, ideally, I'd like to click the button again to close it, since the changing direction of the arrow is a UX expectation.

Reading through your thread, I'm coming to realize this might be a bug in the plugin...

Let me see if I can find it working on a demo site or on a site in their showcase.

Well! I went to this demo page and the same behavior is occuring:

https://demo.theeventscalendar.com/

It's a "feature"?

Looks like it just stays open until you subscribe through one of the calendar choices. That seems a little silly but, I guess I have to go with it

"I guess I have to go with it"
One of the downsides of WordPress.
Option 1 fix it - but then (if a plugin or theme) next update might break it
Option 2 write your own - defeats the purpose of using WP in the first place
Option 3 try find another component that does the same thing - does it integrate to the theme - how long does it take - if more time than Option 2 then again defeats the purpose.

At the end of the day how much is this going to detract from the user experience?

Personally things like this bug me and I end up going with Option 2 - which is why I frequently undercharge and over deliver - but that is just me.

Just following up on this one. Is there enough info to close this question?

It's the Tribe Events Calendar Pro. It's quite an adventure to customize it. Especially, if I want it to look vastly different than out of box. So, I think I'll live with the way it is and let the developer know about it. Maybe there will be a fix in a future up date!

Thanks everyone! I'm closing the question!