Feat: New Select component

[MildTomato]

Feature request

Update the Select component so it is a styled dropdown, that can contain any children for each Select.Option

A great example of this is HeadlessUI https://headlessui.dev/react/listbox

It is entirely possible we can just use HeadlessUI's Listbox component for this, and we wrap it up, style it, and use it as our Select component. Then we can inherit all the accessibility / keyboard nav features.

It would be good to move the old Select to another component. As it might be beneficial to keep a 'native' Select, which has the same styling in case it is needed.

Related to #167

[vickonrails]

Oh great.

When you say keep the existing native Select, do you mean having 2 selects,

• A Select that inherits HeadlessUI's
• One that inherits the native one, but just skins the default resting state?

Are there some already existing resources on Selects for Supabase UI?

[MildTomato]

When you say keep the existing native Select, do you mean having 2 selects,

Yep, exactly - Although honestly I'd rather we just didn't support it - if anyone watching this repo would rather there is just 1 styled Select then we can just drop support for a native Select.

Kind of related as well - we were thinking of also having stripped down versions of data inputs as well, so something like a HtmlInput, HtmlCheckbox, HtmlRadio, which would basically just be a styled input. We'd then import those into the normal components, but they are also available to use directly - we realised that would be useful for our data table when we didn't need all the stuff that's currently inside these components like error messages, form layout markup etc.

Although it seems like it might just be a waste of effort since it's fairly straightforward to style these things in an app.

[MildTomato]

WIP

as a nice to have, will look into having a search version - which would use an input, and the headless UI main button will be hidden.

[MildTomato]

Possibly use element for the options being displayed if using an Input to provide search functionality

datalist example https://www.w3schools.com/tags/tag_datalist.asp

headlessui - swap out element https://headlessui.dev/react/listbox#rendering-a-different-element-for-a-component

[Emokores256]

Any idea of how to use the headlessui/select-listbox in a practical form?

[MildTomato]

Last time I checked I think the Listbox component uses an <ol> tag with <button> tags inside which probably makes it impractical to use in a form unless you are using React.useState or a react form library to handle the state of the listbox.

My plan for this collection of components was to eventually remove ListBox, as it was just a temporary solution until I'd had a look at a Select library like react-select or select2, or maybe Radix will have a Select component by then. I really wanted to get the functionality of multiple selects and select search as it's really useful for the Supabase studio.

I'm working on updating this component to work with a new Form component (using formik) today, so I'll have a look and make sure this component actually works.

[Emokores256]

Thanks for the concern. I'm actually using React on the frontend with Laravel on the backend and inertia is just the go between for my frontend and backend. I'm so mixed up with this. I tried using React-Select but styling it to look like the rest of the form controls made it hard for me to use. I'm so stuck on how to use this whole thing. Capturing the from data as a JSON object to send it to Laravel is mixing me up.

Any ideas on this will be appreciated.

On Thu, Dec 30, 2021, 23:44 Jonathan Summers-Muir @.***> wrote:

Last time I checked I think the Listbox component uses an

tag with
tags inside which probably makes it impractical to use in a form unless you are using React.useState or a react form library to handle the state of the listbox. My plan for this collection of components was to eventually remove ListBox, as it was just a temporary solution until I'd had a look at a Select library like react-select or select2, or maybe Radix will have a Select component by then. I really wanted to get the functionality of multiple selects and select search as it's really useful for the Supabase studio. I'm working on updating this component to work with a new Form component (using formik ) today, so I'll have a look and make sure this component actually works. — Reply to this email directly, view it on GitHub , or unsubscribe . Triage notifications on the go with GitHub Mobile for iOS or Android . You are receiving this because you commented.Message ID: ***@***.***>

[Emokores256]

I think the headlessui Listbox custom select component can work. It's actually a good fit but it requires me sending the data as a JSON object to the backend so that Laravel can store it in the database. But doing this has made me stuck for a while now, and also validating the select component looks impossible.

On Fri, Dec 31, 2021, 05:10 Emmanuel S. Emokor @.***> wrote:

Thanks for the concern. I'm actually using React on the frontend with Laravel on the backend and inertia is just the go between for my frontend and backend. I'm so mixed up with this. I tried using React-Select but styling it to look like the rest of the form controls made it hard for me to use. I'm so stuck on how to use this whole thing. Capturing the from data as a JSON object to send it to Laravel is mixing me up.

Any ideas on this will be appreciated.

On Thu, Dec 30, 2021, 23:44 Jonathan Summers-Muir < @.***> wrote:

Last time I checked I think the Listbox component uses an

tag with
tags inside which probably makes it impractical to use in a form unless you are using React.useState or a react form library to handle the state of the listbox. My plan for this collection of components was to eventually remove ListBox, as it was just a temporary solution until I'd had a look at a Select library like react-select or select2, or maybe Radix will have a Select component by then. I really wanted to get the functionality of multiple selects and select search as it's really useful for the Supabase studio. I'm working on updating this component to work with a new Form component (using formik ) today, so I'll have a look and make sure this component actually works. — Reply to this email directly, view it on GitHub , or unsubscribe . Triage notifications on the go with GitHub Mobile for iOS or Android . You are receiving this because you commented.Message ID: ***@***.***>

[MildTomato]

Not sure I'm following @Emokores256 - and it might be better to direct your question to the headlessui repo instead.

In the headless UI listbox first example it shows how to use onChange prop to capture the new value of the selected option in the Listbox when it changes. You could then build up a JSON payload to whatever backend you have.

You can also apply whatever validation you like at client or/and backend. I've been using Formik to handle validation in a beta branch of this library if you want to check it out. Although it's probably a bit convoluted for what you're trying to do.

I can only think of issues for using headlessui in forms if you need a change event which isn't supported by Listbox.

In regards to styling react-select, I think there's an option to have it unstyled, and you can just add your own CSS classes to the components - then just write your CSS. Although I could be wrong, I might be misremembering.

[Emokores256]

I think I'll post the issues to the headlessui repo. I'm having issues using it.

On Sat, Jan 1, 2022, 05:10 Jonathan Summers-Muir @.***> wrote:

Not sure I'm following @Emokores256 https://github.com/Emokores256 - and it might be better to direct your question to the headlessui repo https://github.com/tailwindlabs/headlessui instead.

In the headless UI listbox first example https://headlessui.dev/react/listbox#basic-example it shows how to use onChange prop to capture the new value of the selected option in the Listbox when it changes. You could then build up a JSON payload to whatever backend you have.

You can also apply whatever validation you like at client or/and backend. I've been using Formik to handle validation in a beta branch of this library if you want to check it out. Although it's probably a bit convoluted for what you're trying to do.

I can only think of issues for using headlessui in forms if you need a change event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event which isn't supported by Listbox.

In regards to styling react-select, I think there's an option to have it unstyled, and you can just add your own CSS classes to the components - then just write your CSS. Although I could be wrong, I might be misremembering.

— Reply to this email directly, view it on GitHub https://github.com/supabase/ui/issues/173#issuecomment-1003486650, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEEQBXWC3R6FMKR7N32EILUTZPAPANCNFSM426VFT6Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[Aravinda93]

@Emokores256

Were you able to figure it out? Is there a way we can add validation to Headless UI ListBox? I am also trying to add support for ListBox (Select) native validation.