element-ui: el-select で iOSのキーボードが開かない

[hdknr]

• この状態でキーボードが使えない

• 次の入力にうつって戻ってくると使える

Remote Search サンプル

• このサンプルはキーボードが有効になる。
• http://element.eleme.io/#/en-US/component/select#remote-search

記事

• iOSのMobile Safari上でのfocus()が妙な件を調べてみた

[hdknr]

強制フォーカス当てても効かない:

  <el-select
    v-model="value"
    filterable
    clearable
    reserve-keyword
    size="large"
    @change="$emit('input', $event);$emit('change');"
    @focus="on_focus"
    @visible-change="on_visible"

   // breedselect が el-select の ref
    on_focus(ev){
        Vue.nextTick(()=>{
          this.$refs.breedselect.$refs.reference.$refs.input.focus();
          console.log(this.$refs.breedselect.$refs.reference.$refs.input);
        });
    },
    on_visible(visible){
      if(visible){
        Vue.nextTick(()=>{
          this.$refs.breedselect.$refs.reference.$refs.input.focus();
          console.log(this.$refs.breedselect.$refs.reference.$refs.input);
        });
     };
    },

[hdknr]

focus イベント

 <el-select
    ...
    @focus="on_focus"
   ....

  on_focus(ev){
        console.log(ev.srcElement);
        console.log(ev.srcElement == this.$refs.breedselect.$refs.reference.$refs.input);
    },

すでに<input>にフォーカスが当たっている / コンソール:

<input type="text" autocomplete="off"  class="el-input__inner">
true

[hdknr]

select 系

• el-select
• vue-select
• vue-strap select
• vue-multiselect
• vue-multi-select

サンプル

• vue-select