[web] Dropdown component improvements
Summary:
In preperation for using the Dropdown component with the tag farcaster channel modals, I needed to extend the Dropdown component. Here is everything new with the Dropdown component
- Introduced defaultLabel prop. This prop is the text/label displayed to the user in the dropdown if no option is currently selected
- activeSelection prop is now optional. There will be some cases where initially a dropdown won't have a selection, so we should make this prop optional
- Introduced selectedIndex state. Rather than iterating through the list of options every time the activeSelection changes, we can keep track of the index of the activeSelection in the list of options and use that to immediately get the active displayed option
- dropdownList is now positioned with absolute rather than relative. The dropdown list was causing the modal to change size whenever the dropdown was opened or closed. With the dropdownList using absolute position, the dropdown list won't affect the size of the modal. One thing to point out is now there could be overflow with the dropdown list; however this seems to be an acceptable pattern in other places that use a dropdown component
Test Plan:
Confirmed there were no regressions with the dropdown in the change role modal (only place we use the dropdown component today)
Also confirmed that the dropdown list overflow works as expected
Before:
After:
Reviewers: inka, kamil, ashoat
Reviewed By: inka, ashoat
Subscribers: ashoat, tomek
Differential Revision: https://phab.comm.dev/D12561