注:この問題は、#843(およびその他)で特定されたいくつかのパフォーマンスの問題に対処する可能性があります。
機能リクエストは問題に関連していますか?
IDSに同梱されている現在のドロップダウン/マルチセレクトは、標準のHTML <select>
要素の上にインタラクションレイヤーとして作成され、単一/複数の設定の両方でオプションの選択を処理します。
このコンポーネントのユースケースは、利用可能なオプションのフィルタリングを含むように時間の経過とともに増加しました。これにより、チームは非常に大きなデータセットにドロップダウン/マルチセレクトを使用するようになりました(場合によっては、一度に2000を超えるアイテムを超える)。 私たちのチームは、これほど大きなデータセットにこのコンポーネントを使用することはお勧めしませんが、これらのレベルでのパフォーマンスに対処することを要求する問題が引き続き発生します。 以前に修正した問題には、次のものがあります。
これらの問題の多くは、「これはまだ素晴らしいことではありませんが、より良い」という警告を残しています。 これは、ドロップダウン/マルチセレクトの設計が、これほど大きなデータセットには適していないためです。 パフォーマンスの問題を修正したい場合は、その設計の基本に取り組む必要があります。
希望するソリューションを説明してください
ドロップダウン/マルチセレクトのパフォーマンスを修正するための可能なソリューションパス:
<select>
を使用するという厳しい要件。 #267からの最近のいくつかの改善により、AJAX呼び出しがクライアントに保存できるドロップダウンのデータオブジェクトを生成する方法が明らかになり始めました。 DOM要素からこの情報を取得するのではなく、コンポーネントの動作の主要なドライバーとして、いくつかの単純な状態(無効/選択など)を持つオブジェクトの使用に移行する必要があると思います。 <select>
タグとその<option>
のレンダリングは、フォームの送信などには引き続き必要ですが、データオブジェクトを「真実のソース」として定義し、selectタグを描画する必要があります。オブジェクトに基づいています(その逆ではありません)。<select>
タグに依存しない/レンダリングしないことを検討してください。 ドロップダウン/マルチセレクトをこのように多くのアイテムとともに利用して、フォーム送信のリクエストをインターセプトし、通常のフォーム送信プロセスに依存する代わりにデータソースオブジェクトの状態を送信することは、開発者にとって合理的なユースケースかもしれません。 現在、このタイプの使用はできません。検討した代替案を説明してください
私たちが過去に浮かんだ他のいくつかのアイデア:
<select>
タグをオーバーレイしてスタイルを設定する、より単純なコンポーネント。 これにより、リストが複製されないため、より大きなリストをより適切に処理できる可能性があります。 この場合でも、一度に2000個の要素を処理する必要があります。また、一般的な仮想スクロール機能を実装して、それをいくつかのコンポーネントに適用することもできます。 https://github.com/infor-design/enterprise/issues/460
@tmcconechy <select>
タグへの依存関係を削除すると、はるかに簡単に発生することがわかります。
彼らが気にするのは選択された要素だけです。 したがって、domには、選択された要素のみを含むselectが含まれているだけで、両方のケースを満たすことができると思います。