The problem
We find a performance issue on the stewardship project page related to pharos dropdown. The pharos dropdown is still rendered in the DOM even when it is closed. So, on the project page where we have hundreds and thousands of columns, we can have 1000+ dropdowns all rendered on the page, which takes up too much cpu and affects performance.
The solution
Destroy the dropdown component when it is closed.
We also want to make sure we still meet the accessibility requirement:
The triggering element needs to have aria-haspopup="listbox", aria-expanded="false" , and optionally aria-owns="{id ref}" and the role="listbox" has the same ID ref when populated dynamically.
Additional information
The triggering element needs to indicate it has an association with a listbox and is currently collapsed, and when activated focus should bring you to the first option.
The problem
We find a performance issue on the stewardship project page related to pharos dropdown. The pharos dropdown is still rendered in the DOM even when it is closed. So, on the project page where we have hundreds and thousands of columns, we can have 1000+ dropdowns all rendered on the page, which takes up too much cpu and affects performance.
The solution
Destroy the dropdown component when it is closed.
We also want to make sure we still meet the accessibility requirement:
The triggering element needs to have aria-haspopup="listbox", aria-expanded="false" , and optionally aria-owns="{id ref}" and the role="listbox" has the same ID ref when populated dynamically.
Additional information
The triggering element needs to indicate it has an association with a listbox and is currently collapsed, and when activated focus should bring you to the first option.