Can't select choices on Safari mobile (iOS 12)

[psmyrdek]

Hi everyone,

I'm facing a problem that seems to be somehow connected to Safari mobile, yet it cannot be reproduced on Choices demo page.

I'm using Choices to build my multiselect, but on Safari mobile (iOS 12) choices from the list cannot be selected by pressing them. The only way to select an item is to press enter on the keyboard.

My setup is pretty simple (it's a component written using Stencil.js):

import Choices from 'choices.js/public/assets/scripts/choices.js'

class MyComponent {

  ...
  
  choicesMultiselect: Choices;

  componentDidLoad() {

        const availableChoices = [...]

        this.choicesMultiselect = new Choices(document.querySelector(`#${this.containerId}`), {
            removeItemButton: true,
            itemSelectText: '',
            choices: availableChoices,
            noResultsText: this.i18nLabels.form_controls.multiselect.no_results,
            noChoicesText: this.i18nLabels.form_controls.multiselect.no_choices
        });
    }

  render() {
        return (
            <div class="question-control">
                <select id={this.containerId} multiple class="display--none" onChange={this.handleChange}></select>
            </div>
        )
    }
}

Everything works fine on most of the browsers except Safari on iOS - even Android works fine. Even Safari on Mac works fine. I guess it might be events that are being fired on this specific browser which may be incorrect. Do you have any ideas on how to solve that? (I was testing Choices demo page on the same browser and your examples work fine)

I was also trying to attach an event listener to the original select element via

this.choicesMultiselect.passedElement.element.addEventListener('change', this.handleChange)

but it's the same result as through Stencil's `onChange'.

Reproducing it via BrowserStack - https://streamable.com/ifuiv

[mtriff]

Please create a new issue if this is still an issue on current iOS versions.

[owen2345]

Same issue here