Avatar of Alicia St Rose
Alicia St Rose
Flag for United States of America asked on

Dropdown Toggle is no longer working to close the dropdown.

Hello Everyone!
I'm trying to figure out why the lower right Calendar subscription dropdown won't close once I've opened it.

I'm not sure if my CSS would have gotten in the way, but it may have. This is the Tribe Events calendar and I'm doing massive customization.

Here's the page in my sandbox:
https://sandbox.intrepidrealist.com/sacred-lomi/events/list/

Thanks!

CSSJavaScriptWordPress

Avatar of undefined
Last Comment
Alicia St Rose

8/22/2022 - Mon
gr8gonzo

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.
gr8gonzo

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?
gr8gonzo

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 );
   };

Open 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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Julian Hansen

It closes if you click outside the "box".

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

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

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

Open 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)







⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

@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

lenamtl

@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

Open in new window



 
gr8gonzo

@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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
Julian Hansen

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 );
    };

Open 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?


Alicia St Rose

ASKER
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.
Alicia St Rose

ASKER
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
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

"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.
gr8gonzo

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

ASKER
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!
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
Alicia St Rose

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.