コンポーネントのオーバーレイ内に仮想スクロールとカスタム検索入力を使用して、angular-material select コンポーネント (v10) に基づいて、カスタムの複数選択コンポーネントを作成しようとしています。mat-select-triggerまた、選択されたアイテムのデフォルトのリストの代わりに、選択されたアイテムの数を表示する要素を追加しました。
(ほぼ完全に機能し、スタイリングなしの) サンプルは、このstackblitzにあります。
私が抱えている問題は、選択したアイテムの表示値に関連しています。
問題を再現するには、次のことを行う必要があります。
- アイテムのリストを検索し (例:
55)、オプションを選択します (例:item-55) - オーバーレイの外側をクリックして閉じます
- 予想どおり、コンポーネントが表示
1 selectedされ、アイテムが下の [選択されたアイテム]リストに表示されます。 - リストを再度開き、検索フィールド
clearボタンをクリックしてから、オーバーレイの外側をクリックして再度閉じます。
コンポーネントは、表示されItemsているはずのときにプレースホルダーを表示します1 selected。これは、項目がまだ [選択された項目]リストにあるためです (要素で使用されているのはこのリストですmat-select-trigger)。
それでも、リストを再度開いて選択した項目 ( item-55) までスクロールすると、その項目が選択されます。オーバーレイの外側をクリックして再度閉じると、正しい値が表示されます ( 1 selected)。
仮想スクロール関連の問題であることは理解していますが、解決策や回避策を見つけることができませんでした。
どんな提案でも大歓迎です！