Ability to customize open/close icon and its position in the Select component

[boi87]

Is your feature request related to a problem? Please describe.
Using the Team UI Select, I would like to be able to customize the icon with the pointing down triangle and possibily also be able to decide whether to align it to the right or to the left of the default dropdown text. Is it something that is already achievable?
Also, I am not sure if there is a boolean open prop.

Describe the solution you'd like

• A prop for the icon, which ideally accepts either a src or a some JSX as svg
• Another prop to decide its position against the text would also be nice. I'm not sure if this is already possible somehow. If it is, any hint on how to do it would be very appreciated.
• A boolean prop which changes on toggle (e.g. open) would be a very nice touch too!

Describe alternatives you've considered
At the moment I'm sticking to the default design...

Thank you!!

[atanasster]

@boi87 - this is not possible in the current code base and built-in tracking the keyboard and mouse events for open/close state can be more complicated than desired at this stage.

What do you think of this simpler solution that can be turned into a PR: https://theme-ui-draft.netlify.app/components/select#custom-arrow-icon

• it allows you to replace the arrow icon
• you can set the icon with all possible props - margins/size etc
• you can track the keyup/click/blur events on your end and pass in an open or close icon.

source:
https://github.com/atanasster/theme-ui/blob/select-custom-arrow/packages/docs/src/pages/components/select.mdx

[boi87]

@atanasster - Hi and thanks for taking time to assist with this feature request!
Allowing to pass a prop for the icon and the ability to change it based on keyup/click/blur events would definitely be a big improvement.
I am quite sure this will make my life easier with what I'm working at.
Thanks again, keep up the good work!

[atanasster]

@boi87 , thanks very much, I will then submit it as a PR. And possibly for a future release we can also integrate builtin handling of the open/close state.