Using maxHeight does not allow scrolling on mobile

[asafteirobert]

When having a large list and setting maxHeight to limit the size, scrolling is impossible on mobile devices since touching any item immediately selects it.

This seems to be related to list items reacting to 'touchstart click'. Changing the event to just 'click' makes it work correctly on mobile.

Tested on Android Chrome 89.0.4389.90

[mrcbt]

Im also experiencing this

[mrcbt]

@asafteirobert this worked for me

button.multiselect-option.dropdown-item {
  pointer-events:none;
  }

span.form-check input,
span.form-check label  {
  pointer-events: all;
}

[Terrox]

@asafteirobert this worked for me

button.multiselect-option.dropdown-item {
  pointer-events:none;
  }

span.form-check input,
span.form-check label  {
  pointer-events: all;
}

Thank you!, this saved me. I found this bug in both iphone safari and android chrome. Should be rolled into core.

[mrcbt]

@Terrox awesome, I'm glad it helped you.

It's not perfect but it helps. Later on, I added 'pointer-events:none' to the label as well. So the only way for the user to filter the option is by clicking in the checkbox instead of the name.

[divy3993]

This doesn't work for me, please help... Reason behind it is maybe they have buttons as a dropdown list items.

[divy3993]

When having a large list and setting maxHeight to limit the size, scrolling is impossible on mobile devices since touching any item immediately selects it.

This seems to be related to list items reacting to 'touchstart click'. Changing the event to just 'click' makes it work correctly on mobile.

Tested on Android Chrome 89.0.4389.90

Hey @asafteirobert, can you help me so what should be done, should I make this edit in the library file itself? Or should I override it?

Will be really greatful if help me out with this.

[coelhorrc]

When having a large list and setting maxHeight to limit the size, scrolling is impossible on mobile devices since touching any item immediately selects it. This seems to be related to list items reacting to 'touchstart click'. Changing the event to just 'click' makes it work correctly on mobile. Tested on Android Chrome 89.0.4389.90

Hey @asafteirobert, can you help me so what should be done, should I make this edit in the library file itself? Or should I override it?

Will be really greatful if help me out with this.

You just have to add the CSS to the page in which you have the multiselect. In my case, I removed the .multiselect-option class and added the media query to apply the style only on devices smaller than 1023px.

This is how this solution worked for me:

@media screen and (max-width:1023px){ 
   .multiselect-container button.dropdown-item {
     pointer-events:none;
   }
   .multiselect-container span.form-check input {
     pointer-events: all;
   }
   .multiselect-container span.form-check label  {
     pointer-events: none;
   }
}

[abhishek-iclr]

Has anyone found perfect solution for this issue? As using below media query will help to start the scroll but when click on text radio button does not get selected we have manullay click on radio button

@media screen and (max-width:1023px){ .multiselect-container button.dropdown-item { pointer-events:none; } .multiselect-container span.form-check input { pointer-events: all; } .multiselect-container span.form-check label { pointer-events: none; } }

[maotou316]

add padding-right: 30px; into .multiselect-container

.multiselect-container {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding-right: 30px;
}