Smooth-scroll breaks default dropdown items behaviour

Topic: Smooth-scroll breaks default dropdown items behaviour

robertp free asked 5 years ago

Expected behavior

Dropdown menu hides itself after clicking an item.

Actual behavior

When using smooth-scroll the default behaviour of dismissing dropdown menu after clicking is broken.

Add comment

robertp free answered 5 years ago

0 0 Best answer

There you go. Based solely on the examples you provided in the bundle:

MDB-Landing-Page-Templates-Pack/html/Landing-Page-Event.html
MDB-saas-Templates-Pack/html/pages/testimonials.html

The dropdown part was copied to the landing page. The dropdown should hide after click: https://mdbootstrap.com/snippets/jquery/fajnebity/937368

Adam Jakubowski staff commented 5 years ago

Hi,

I checked your code and the dropdown closes when I click on it, just like I click outside it. Maybe this is a problem with your browser ? What version of mdb do you use ?

robertp free commented 5 years ago

Good one, looks like we have some magic going on here. MDB: 4.8.5, browsers: - Firefox 68 - Chrome 75.0.3770.100 - Safari 12.1.1

Just in case, I recreated the example with freshly unzipped bundle. The problem is still there. The dropdown stays on after click event. I can't see how this could be related to the OS (macOS).

robertp free commented 5 years ago

Ok, looks like I found the reason: smooth-scroll is blocking events. Removing it from ul restores the expected behaviour.

robertp free commented 5 years ago

Some hints: - https://stackoverflow.com/questions/42115701/jquery-smooth-scroll-somehow-breaking-bootstrap-navbar - https://stackoverflow.com/questions/33107201/smooth-scroll-a-bootstrap-page-with-sticky-navbar

Adam Jakubowski staff commented 5 years ago

maybe try add this into your code $(".dropdown-item").click(function() { $(".dropdown-menu").removeClass("show"); });

Add comment

Adam Jakubowski staff answered 5 years ago