Prevent invoking the softkeyboard after tapping a VuetifyJS combobox

Question

I need to use a VuetifyJS combobox on mobile. As soon as the combobox field gets a tap it invokes the softkeyboard. How to prevent the triggering of the softkeyboard? CodePen example: https://codepen.io/anon/pen/KxVEea

HTML:

  <v-combobox
  v-model="select
  :items="items"
  label="Select an item"
  ></v-combobox>

JS:

new Vue({
  el: '#app',
  data () {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

Why aren't you using a [`v-select`](https://vuetifyjs.com/en/components/selects) instead? It probably does exactly what you want out of the box. Here's a demo replacing `v-combo` with `v-select` in your Codepen: https://codepen.io/tony19/pen/bxwdJj — tony19, Aug 29 '18 at 00:13

Sphinx · Accepted Answer · 2018-08-29T20:29:00.267

Check Vuetify Guide: Combobox API, there is one prop=type, which Sets input type (if you open the browser inspector, you will see how Vuetify constructs the combobox), and its default value is 'text'. That is why the softkey board auto-pops up when tap it.

One quick solution, set it to button. (But the potential risk is the user can't change the value manually anymore. Especially you'd like implement one searchable combobox)

Check below demo (or open the codepen in your mobile):

Edit: align input text to left by CSS Specificity (please look into the CSS part in below demo).

new Vue({
  el: '#app',
  data() {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

.v-menu input[type=button][role=combobox] {
  text-align: left;
}

.v-select__slot > input[type=button][role=combobox] { 
  /*text-align: left;   this one works also, you can open browser inspector, then build your own */
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.js"></script>


<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout wrap>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" label="Select a favorite activity or create a new one" type="button"></v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" chips label="I use chips" type="button"></v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" chips label="I use a scoped slot" type="button">
            <template slot="selection" slot-scope="data">
              <v-chip
                :selected="data.selected"
                :disabled="data.disabled"
                :key="JSON.stringify(data.item)"
                class="v-chip--select-multi "
                @input="data.parent.selectItem(data.item)"
                type="button"
              >
                <v-avatar class="accent white--text">
                  {{ data.item.slice(0, 1).toUpperCase() }}
                </v-avatar>
                {{ data.item }}
              </v-chip>
            </template>
          </v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" chips label="I'm readonly" readonly></v-combobox>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Works great but the text is centered now and not left aligned. This didn't work: ` — Tom, Aug 29 '18 at 19:15
@Tom, check the updated answer, it should meet your requirements. — Sphinx, Aug 29 '18 at 20:30

score 1 · Answer 2 · answered Aug 28 '18 at 15:49

According to this answer using readonly="true" solve the issue, I found a codePen with more advanced features to try and test the concept. Combobox have a readOnly parameter and could probably be opened by some JS... but !

If you need a combobox without the need for user input, why not use the selects by the same library ? With the proper parameters it render just like a combobox.

Prevent invoking the softkeyboard after tapping a VuetifyJS combobox

2 Answers2