オートコンプリート コンポーネントを見ると: https://mui.com/material-ui/react-autocomplete/
ドロップダウン内の提案をクリックした後も、入力ボックスはフォーカスを保持します...どうやってそれを行うのでしょうか?私自身の Vue アプリ (マテリアル UI を使用していない) のすべてのバリアントでは、入力がフォーカスを失うのを防ぐためのクリック イベントを取得できません。
この問題について長い間 Google で調べてみましたが、明確な解決策が見つかりませんでした。たとえば、人々はマウスダウン/タッチスタートを提案しましたが、これでは (ドロップダウンをドラッグすることによる) スクロールが中断されます。 MaterialUI にはこの問題はないようで、マウスダウンを使用していないようです。
Chrome デベロッパー ツールを使用してイベントを分析してみましたが、シングル クリック イベントしか確認できませんでしたが、必要最低限のコードでは何が起こっているのかわかりません。
Vuetify もこれを行います: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
誰かがこの問題を抱えている場合は、これも役立つと思います https://codepen.io/Pineapple/pen/MWBVqGW
編集これが私がやっていることです:
{{ 結果.アドレス }}テンプレート>
次に、app-input-autocomplete
:
<テンプレート> <アプリ入力 @focus="「オンフォーカス」" @blur="「オンブラー」" v-bind="$attrs"> <テンプレート #underInput>アプリ入力>テンプレート> テンプレート> <スクリプト> import { ref, toRef } から 'vue'; AppInput を '@/components/AppInput.vue' からインポートします。 '@vueuse/core' から { onClickOutside } をインポートします。 デフォルトのエクスポート { コンポーネント: { アプリ入力、 }、 継承属性: false、 小道具: { 開ける: { タイプ: ブール値、 デフォルト: false、 }、 結果: { タイプ: 配列、 デフォルト: () => ([])、 }、 }、 発行: ['autocomplete-close', 'autocomplete-select'], setup(props, { 出力 }) { const ドロップダウン = ref(null); const open = toRef(props, 'open'); const focus = ref(false); onClickOutside(ドロップダウン, () => { if (!focused.value && open.value) { Emit('autocomplete-close'); } }); 戻る { 落ちる、 集中して、 }; }、 メソッド: { onFocus() { this.focused = true; }、 onBlur() { this.focused = false; }、 onClick(結果) { this.$emit('autocomplete-select', result); }、 }、 }; スクリプト>
@Claies のアイデアとリンクに感謝し、次の手順でこの問題を解決しました。
https://codepen.io/Pineapple/pen/MWBVqGW
mousedown @クリック結果は通常どおり動作します (入力が閉じられます)
@click/@focus 入力セット
- open = true
@ブラーセットオープン = false
の
event.preventDefault