1時に寝て3時に起きて5時までだらだらしてて8時に起きた。季節の変化のせいかな？夜眠れない生活が普通になってきた。最近セブンイレブンのマスカット紅茶をよく飲んでいるのでカフェインの摂り過ぎなのかもしれない。

vuetify の v-form の enter key 無効化⌗

あるフォーム画面でテキスト入力欄で enter key を押下すると xhr リクエストが送信されてしまう。これがフォームのデフォルトの振る舞いかどうか、私はフロントエンドに詳しくないからよくわからない。検索などはその方が便利なときもあるだろうからそういう振る舞いがあることは知っている。業務の重要な情報を誤って確定してしまってはいけないから、画面によっては禁止した方がよい状況もある。vuetify の v-form を使っている画面だとデフォルトで enter key を入力すると submit 処理が実行されてしまう。パラメーターに渡される event 情報からもマウスクリックとキー入力の見分けがつかない。

それぞれのコンポーネントの events をみると、v-form は input と submit しか対応していない。v-form の設定で直接 enter key 入力のイベント制御はできない。Binding Native Events to Components によると、そういった状況のために .native を使うと直接イベントをフックできるらしい。ここで v-text-field は keyup ではなく keydown のみを提供しているせいか keydown を次のように prevent してあげることでテキスト入力欄で enter key を押下しても submit 処理は呼ばれなくなった。但し、副作用として v-form の slots にあるすべてのコンポーネントの enter key の keydown イベントを prevent してしまう。

  <v-form
    @submit="submit"
    @keydown.native.enter.prevent
  >

vuetify の issue をみていると過去には無効だったものを有効化したようにもみえる。なにが正しい振る舞いなのかよくわからないし、どうやって制御するのが正しい方法なのかよくわからなかった。