twenty
twenty copied to clipboard
twentyhq
Select component should have a scroll and be searchable
I created a custom column in the data model with lots of options.
Settings:
Here's how it was displayed in the UI — I had to scroll the page to scroll the list, there was no "sub scroll":
Can we create a component similar to the component we use for account owner field or even better adapt it re-use that one? The main difference is that the search here would probably be done on the frontend side only.
A quick fix would be to just set a max-height + make this scrollable, but it would be best if we can add search.
Figma: https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=3007%3A69739&mode=dev
@gold-olar The scroll part would be easy but what's hard is the search. You would probably need to adapt and migrate to this existing component that does search already: https://storybook.twenty.com/?path=/story/ui-input-relationpicker-singleentityselect--default
So probably not very easy for a first issue. But if you feel confident and still want to give it a shot let us know!
Yeah, I saw that component, but I was thinking I would need to just add the search functionality to the current component (instead of re-working the relationship picker component) since this search is going to be done on the frontend side only.
If you'd like, I can work on the issues separately. I can send in a fix for the scroll part first, and take more time to work on the search (if you really want me to adapt and migrate to the existing component).
@gold-olar Yes you're right, probably worth keeping 2 separate high-level components but reusing the same underlying components as much as we can (so that we don't duplicate keyboard behavior code for example). So you can start in this direction!
@charlesBochet can give better guidance than I would
@gold-olar A few hints about this one:
- we would like to improve the SelectFieldInput (which should stay different from the RelationFieldInput)
- you can use SelectableList to make it scrollable and navigable with keyboard
- you can use components from ui/layout/dropdown for the UI layer (DropdownMenuSearchInput, DropdownMenuSeparator, DropdownMenuItemsContainer...)
You should find example in the code about how to use these components Good luck! :)
A little design hint:
The following picker should be used for Select. The label size should be 20px and not 16px.
As a reminder the tag background color is the one set here:
Hey @gold-olar have you made any progress on this yet? Would be amazing to have it in the next release! Thanks a lot
@FelixMalfait I am working on #3354 and all requirements will be covered in that as I have added the Search and Listing feature already. Since I have made lots of progress in that it would be easy if I resolve this along with that issue.
A little design hint:
The following picker should be used for
Select. The label size should be 20px and not 16px.
As a reminder the tag background color is the one set here:
@Bonapara for the options we need to create this select with label background?. Or we can make change in exsisting MenuItemSelect?
@ARSHIL1804 Charles gave some direction above. MenuItemSelect is something different that is not related I think
we would like to improve the SelectFieldInput (which should stay different from the RelationFieldInput) you can use SelectableList to make it scrollable and navigable with keyboard you can use components from ui/layout/dropdown for the UI layer (DropdownMenuSearchInput, DropdownMenuSeparator, DropdownMenuItemsContainer...)