Element UI - VueJS - Select Input Double Tap bug on IOS

user_3830515 0
Viewed 1491

I have a weird issue on iOS safari or chrome, when trying to select an option from a select input, when i touch the selector, it shows the options correctly on first tap, but then when i try to select an option, i have to tap twice to make it work, this is my actual scenario:

"element-ui": "^2.13.1", "vue": "^2.6.11"

Here is my select input:

                        <el-select class="select-danger"
                                   placeholder="Language / Idioma"
                                   v-model="locale">
                            <el-option v-for="option in selects.languages"
                                       class="select-danger"
                                       :value="option.value"
                                       :label="option.label"
                                       :key="option.label">
                            </el-option>
                        </el-select>


watch: {
      // watch for locale changes
      locale: function (value) {
          alert("selected")
      }
  },

This issue seems to happens only on iOS, i tested on android chrome browser and works flawless.

Any ideas of what could be causing this issue?

element-ui vue.js mobile-safari css ios
1 Answers

After looking around for a while i found a workaround in Element UI Github issues, right here:

Element UI Github Issue

Appearently it has to do with the hover state that it's not well managed on iOS, and it's a well known issue, for the case the solution seems to be adding the following SCSS to App.vue :

.el-scrollbar {
    > .el-scrollbar__bar {
        opacity: 1;
    }
}

But somehow in my case this didn't work, so i did it with just css:

/*Fixes double tap on iOS*/
.el-scrollbar__bar {
    opacity: 1!important;
}

And that was it, this solved the double tap issue with Element UI.

Hope this helps someone else.

user_38305150
Related