[V2] Accordion opening and closing immediately on iOS

1

Hi,
I’m using in my app a collapsible accordion (ul + li).

On Android all is fine. On iOS with the same code, the item opens and close in a fraction of seconds upon click.

I checked the code and in effect the code

clicks: {
’.accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a’: function open($clickedEl) {
var app = this;
Accordion.toggleClicked.call(app, $clickedEl);
},
},

is run twice which explains the behaviour.

I’m not sure anyway why on Android it works…

Interesting to note that both on simulator and real iPhone, tapping for let’s say one second leave afterwards the item open

2

hmmm… tried on another portion of my page and it works good.

Problem seems the accordion is on a div belonging to a full screen leaflet map…

I will investigate more and report…

3

In effect it seems that disabling “tap” in leaflet solve the issue (maybe a conflict with two system handling click VS tap)?

Anyway, as reference:
var map = L.map(“map”, {
tap: false,
//… other options
});

4

Yeah, looks like you have two clicks event fired on same click. You can also try to add no-fastclick class to such accordion item

5

I tried fully disabling fastclick in F7 V2 but did not help… Anyway it seems fine on iOS and furthermore I disabled tap only if it’s an iOS device (just in case…)
Thanks!
Luigi

6

I’ve been noticing some buggy accordion behavior in ios safari on iphone 8. I noticed that if the user taps and holds for a short amount of time the accordion’s state becomes bugged and the next tap opens and closes the accordion very quickly. I added no-fastclick which solves that problem but sometimes the accordion will close instantly with no animation. You can recreate this with kitchen sink.

7

Yes. Noticed a similar but different thing… If I tap long the accordion then it opens properly. If it’s a normal tap it open and closes. Disabling the option in leaflet solves the issue. It’s only ios

8

Hello, I just started phonegap in combination with Framework 7! First of all… thanks for creating this framework!!! Really happy with it!

I have the same problem but I am too newby to know how to solve this by “disabling “tap” in leaflet” … where do I set this? I tried the examples from the site … i placed them in a page-content div … they show up but as soon as I click them they are closed…

Thanks in advance for your help!