[Feature Request] Improve v-select mobile UX

[birdlavv]

Problem to solve

The current material v-select dropdown often has trouble on mobile devices when there are many options, especially when a fullscreen modal/dialog is involved. Using a browser's default select can improve UX for mobile devices. For example iPhone Safari provides its own selection dial for HTML <select/ > that is better equipped for managing many <option/ >s on smaller devices.

Proposed solution

https://codesandbox.io/s/zq4lo037wl

is the implementation we’ve been using as a placeholder at work to offer this functionality.

[KaelWD]

We have considered rendering a v-dialog instead of a v-menu on mobile devices. I don't think we'd bother with a native select as most of the features wouldn't work any more. I also don't really want to add another prop to the component, it already has like 70.

[flyingL123]

@KaelWD Has any more thought been given to this? Having a native select option is really important for a couple of reasons.

1. The current component does not reliably accept values from a browser autofill, particularly on mobile. For example, if I have an address form that uses the select component for the state or province field, if the user starts typing in one of the first fields in the form, the browser will offer to autocomplete the form with one of their previously used addresses. When the address is selected, all of the fields get populated except for the select because the select doesn’t contain a real visible input to be filled in. Currently I have to create hidden fields to accept these auto filled values, and bind the select components value to it, but this does not work reliably on all browsers since some mobile browsers do not appear to fill in visually hidden inputs.

2. Specifically on an iPhone, the select component is not recognized as a form input when using the native arrows above the keyboard to navigate through the fields of a form. The select gets skipped.

I am using vuetify in our e-commerce checkout. You can see it live on StoreYourBoard.com. Making the forms as easy as possible to use is extremely important in this type of use case. These limitations on the select component makes it very difficult to optimize the forms.

Here is an example of a material component with a native option to address these issues:

https://material-ui.com/components/selects/

Vuetify needs the same option in my opinion. What do you think?

[flyingL123]

@KaelWD any thoughts?

[flyingL123]

In case it helps anybody, I was able to create a NativeSelect component by extending the VTextField component and overriding the genInput() method to create a select rather than an input. I'm sure there is a better more future proof way to do this, but so far for me it's working great. This is the content of my NativeSelect.vue file:

<script>
import { VTextField } from 'vuetify/lib';

export default {
  extends: VTextField,

  props: {
    items: {
      type: Array,
      required: true,
    },
    appendOuterIcon: {
      type: String,
      default: '$dropdown',
    },
  },

  methods: {
    genInput() {
      const listeners = Object.assign({}, this.listeners$)
      delete listeners['change'] // Change should not be bound externally

      return this.$createElement('select', {
        style: {},
        domProps: {
          value: this.lazyValue,
        },
        attrs: {
          ...this.attrs$,
          autofocus: this.autofocus,
          disabled: this.disabled,
          id: this.computedId,
          readonly: this.readonly,
        },
        on: Object.assign(listeners, {
          blur: this.onBlur,
          input: this.onInput,
          focus: this.onFocus,
          keydown: this.onKeyDown,
        }),
        ref: 'input',
      }, this.genOptions());
    },

    genOptions() {
      return this.items.map(item => {
        return this.$createElement('option', {
          domProps: {
            innerHTML: item.name,
            value: item.code,
          }
        });
      });
    }
  }
}
</script>

<style scoped>
  select {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    color: rgba(0,0,0,.87);
    cursor: pointer;
  }

  select:focus {
    outline: none;
  }

  >>> .v-input__append-outer {
    position: absolute;
    right: 11px;
  }
</style>

Then I use it in other .vue files like this:

<NativeSelect
  label="Country"
  outlined
  v-model="countryCode"
  :items="countries"
  name="country"
  autocomplete="country"
/>

In my case items is an array of country objects, each with a code and a name, which is why those keys are hardcoded into the genOptions method. This can of course be customized via props but I don't have a need for that yet.

[dixhuit]

Quasar has something very similar.

• https://quasar.dev/vue-components/select#options-list-display-mode
• https://codepen.io/pen?&editors=101

[timraasveld]

I made a dirty workaround based on using a fullscreenposition: fixed display on small viewports (such as mobile with the keyboard open).

This example is for v-autocomplete, but it should easily carry over to v-select as well.

https://codepen.io/timraasveld/pen/yLqeOYG (make the preview less than 700px height to see it)