実現したいこと
Vue3 Composition API でボタンを非表示から表示に変更すると同時にフォーカスを設定したい。
発生している問題・エラーメッセージ
下記のソースコードにおいてshowボタンをクリックするとボタンが表示されますがフォーカスが設定されません。
該当のソースコード
Vue
1<script setup> 2import { ref, nextTick } from 'vue' 3const visible = ref(false) 4const target = ref() 5const show = () => { 6 visible.value = true 7 nextTick(() => { 8 target.value.focus() 9 }) 10} 11</script> 12<template> 13 <div> 14 <button @click="show">show</button> 15 <button ref="target" v-show="visible">target</button> 16 </div> 17</template>
試したこと
次のソースコードにより、テキストボックスの場合は表示と同時にフォーカスを設定できることを確認しました。
(下から3行目以外は上記と同じ)
Vue
1<script setup> 2import { ref, nextTick } from 'vue' 3const visible = ref(false) 4const target = ref() 5const show = () => { 6 visible.value = true 7 nextTick(() => { 8 target.value.focus() 9 }) 10} 11</script> 12<template> 13 <div> 14 <button @click="show">show</button> 15 <input ref="target" v-show="visible" value="target"> 16 </div> 17</template>
また、次のソースコードにより、ボタンに初期フォーカスを設定できることを確認しました。
Vue
1<script setup> 2import { ref, onMounted } from 'vue' 3const target = ref() 4onMounted(() => { 5 target.value.focus() 6}) 7</script> 8<template> 9 <div> 10 <button ref="target">target</button> 11 </div> 12</template>
追記
フォーカスを設定したいボタンを <button> から <input type="button"> に変更してもフォーカスを設定することはできませんでした。
また、最初から表示された状態であってもフォーカスを設定することはできませんでした。
ソースコードを以下に示します。
Vue
1<script setup> 2import { ref } from 'vue' 3const target1 = ref() 4const target2 = ref() 5</script> 6<template> 7 <div> 8 <p> 9 <!-- focus1ボタンをクリックしてもtarget1ボタンにフォーカスが設定されない --> 10 <button @click="target1.focus()">focus1</button> 11 <input type="button" ref="target1" value="target1"> 12 </p> 13 <p> 14 <!-- focus2ボタンをクリックするとtarget2テキストボックスにフォーカスが設定される --> 15 <button @click="target2.focus()">focus2</button> 16 <input type="text" ref="target2" value="target2"> 17 </p> 18 </div> 19</template>
補足情報(FW/ツールのバージョンなど)
Windows 11
Chrome 114.0.5735.110
Node.js v17.5.0
Vue 3.3.4
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。