MaterialUI はどのようにしてこれを行うのでしょうか?
<p>オートコンプリート コンポーネントを見ると: https://mui.com/material-ui/react-autocomplete/</p>
<p>ドロップダウン内の提案をクリックした後も、入力ボックスはフォーカスを保持します...どうやってそれを行うのでしょうか?私自身の Vue アプリ (マテリアル UI を使用していない) のすべてのバリアントでは、入力がフォーカスを失うのを防ぐためのクリック イベントを取得できません。 </p>
<p>この問題について長い間 Google で調べてみましたが、明確な解決策が見つかりませんでした。たとえば、人々はマウスダウン/タッチスタートを提案しましたが、これでは (ドロップダウンをドラッグすることによる) スクロールが中断されます。 MaterialUI にはこの問題はないようで、マウスダウンを使用していないようです。 </p>
<p>Chrome デベロッパー ツールを使用してイベントを分析してみましたが、シングル クリック イベントしか確認できませんでしたが、必要最低限のコードでは何が起こっているのかわかりません。 </p>
<p>Vuetify もこれを行います: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts</p>
<p>誰かがこの問題を抱えている場合は、これも役立つと思います https://codepen.io/Pineapple/pen/MWBVqGW</p>
<p><strong>編集</strong>これが私がやっていることです: </p>
<pre class="brush:html;toolbar:false;"> <app-input-autocomplete
@autocomplete-select="onSelect"
@autocomplete-close="onClose"
:open="開く">
<template #default="{ result }">
<div class="入力オートコンプリートアドレス">
{{ 結果.アドレス }}
</div>
</テンプレート>
</app-input-autocomplete>
</pre>
<p>次に、<code>app-input-autocomplete</code>: </p>
<pre class="brush:html;toolbar:false;"><テンプレート>
<アプリ入力
@focus=「オンフォーカス」
@blur=「オンブラー」
v-bind="$attrs">
<テンプレート #underInput>
<div ref="dropdown" v-show="open" class="input-autocomplete-dropdown">
<div class="入力オートコンプリート結果">
<div v-for="結果の結果" :key="result.id" @click="onClick(result)" class="input-autocomplete-result">
<slot :result="結果" />
</div>
</div>
</div>
</テンプレート>
</app-input>
</テンプレート>
<スクリプト>
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);
}、
}、
};
</スクリプト>
</pre></p>
