MaterialUI はどのようにしてこれを行うのでしょうか?
P粉916760429
P粉916760429 2023-09-04 18:17:31
0
1
536

オートコンプリート コンポーネントを見ると: 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

編集これが私がやっていることです: