Vue.js 入力時にinputのフォーカスが外れてしまう

Question

発生している問題・エラーメッセージ

電話番号（phone_number）のinputに半角英数を入力するとき、入力後すぐフォーカスが外れてしまいます。
会社名、店舗名では発生しておらず、原因不明で困り果てています。
CodePenのリンクです

前提・実現したいこと

Vue.jsで会社、店舗（複数）、店舗ごとの電話番号（複数）を登録・編集できるページを作成
setData()は本来サーバーから登録済みのデータを持ってきています

該当のソースコード

<div id="app">
  <input type="text" v-model="company_name">
  <div v-for="shop in shops" :key="shop.shop_id">
    <input type="text" v-model="shop.shop_name">
    <ul>
      <li v-for="row in shop.phone_numbers" :key="row.phone_number">
        <input type="text" v-model="row.phone_number">
      </li>
    </ul>
  </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      company_name: null,
      shops: [{
        shop_name: null,
        phone_numbers: [{ phone_number: null }],
      }],
    };
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      this.company_name = '株式会社○○';
      this.shops = [{
        shop_name: '××支店',
        phone_numbers: [{ phone_number: 1234 }],
      }];
    },
  },
});

補足

クローム、firefox、edgeで確認したのでブラウザの問題ではないと思います。

Answer 1

原理はわかっていませんが、フォーカスが外れてしまう現象は直ったので解決策だけでも。

---

<li v-for="row in shop.phone_numbers" :key="row.phone_number">
↓
<li v-for="row in shop.phone_numbers">のように:keyを外すとフォーカスされ続けるようになりました。

---

以下ただの推測です。

リストレンダリング#keyにあるように

この標準のモードは効率がいいです。しかしこれは、描画されたリストが子コンポーネントの状態や、一時的な DOM の状態に依存していないときにだけ適しています (例: フォームのインプットの値)。

inputのような値が変わること前提のものには:keyをつけないのかなと思います。
内部実装はわかりませんが、:keyがあると値が変わるたびに処理が走るから、フォーカスが外れてたのかなぁと推測しています。

Comments

[R_suzuki766]

迅速な回答と丁寧なご説明、ありがとうございます！
アドバイスいただいた通り、:key="row.phone_number"を外すことで解決できました。ありがとうございました。

Answer 2

「<li v-for="row in shop.phone_numbers" :key="row.phone_number">」の:keyの値をrow.phone_number以外の値にするのはどうでしょうか。
これであればレンダリングが走らず、フォーカスが外れることはないと思います。
:keyのための新たに値を用意する必要はありますが。