Topic: Scrolling MDB Select Options on Mobile Devices

Graham Meehan free asked 4 years ago


Expected behavior

An MDB Select which can scroll through its select-items in a manner normally expected on mobile devices. (Touch anywhere in a list and drag to begin scrolling)

Actual behavior

Touch-scrolling on mobile devices (or with mobile-mode active in Development Mode in Chrome) will either close the dropdown prematurely or unintentionally select a dropdown option if the user starts touch-scrolling directly on top of a dropdown option.

Successful scrolling can only be carried out if the user touches inside the unordered-list (ul) element but not inside of one of the contained list-item (li) elements, which is usually too small of a space to selectively touch on a mobile device.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/jquery/graham_meehan/1406048


Graham Meehan free answered 4 years ago


Issue resolved in Version 4.9.0.

Thanks!


5rovaliev free answered 2 years ago


I have a common issue with searchable select, when I try to scroll the searchable select the whole dropdown disappears. I have also a select without searchable input and it's working as respected. This issue appears only on Android devices with chrome browsers. Any suggestions?


Marcin Luczak staff commented 2 years ago

Hi,

Have you tried the workaround with commenting out the bindMobileDevicesMousedown() function in the source code of the select component? Could you also please create a snippet with your code? I was unfortunate to reproduce your problem on a mobile device with android and on a chrome browser, so maybe it is a case regarding your code.

Keep coding, Marcin


gianlucagiacometti priority answered 4 years ago


Workaround:

comment or empty the function bindMobileDevicesMousedown()


Sebastian Kaczmarek staff answered 4 years ago


Definitely a bug on our side. We'll fix it asap. Thanks for the report.



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.11
  • Device: Mobile
  • Browser: Chrome
  • OS: Android
  • Provided sample code: No
  • Provided link: Yes