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.


robertp free answered 5 years ago


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


Adam Jakubowski staff answered 5 years ago


Hi,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,

Adam



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.4
  • Device: Desktop
  • Browser: Safari, Firefox
  • OS: Any
  • Provided sample code: No
  • Provided link: No