[Select] Remaining tasks

[benoitgrelard]

• [x] Add chromatic stories
• [x] Add tests
• Improve mobile experience
  • pointer handling works well when using slowly, but it has the tendency to close from under you when going quickly, need to check what's going on here
  • on mobile, there's an issue with positioning when the page is pinch-zoomed. I think it might be due to visual viewport vs. layout viewport and the fact we position: fixed.
• Investigate to see if we can add support for animation (opening/closing)
• see if we can improve this scenario: if I press down on the ScrollUpButton or ScrollDownButton and hold while it scrolls, when I release, it will select the first or last item because the scroll button disappears and mouse is now released on an item
• test is it can work with native label and not just our Label

[Kinbaum]

@benoitgrelard Can you also look at the option of supplying a max-height to the content / viewport? Currently when setting the max-height for the content and attempting to scroll, the container sticks to the bottom of the window.

[Kinbaum]

Also, when using the select with groups of items, the separator is being announced as a group. In the example you have with food, the screen reader says there's 5 groups when there are only 3 (plus 2 separators)

[benoitgrelard]

Hey @Kinbaum, someone is keen! haha How have been playing with it given it's not even out yet 😀 Guessing you're following the PRs/npm, etc? 😀

In any case:

Also, when using the select with groups of items, the separator is being announced as a group. In the example you have with food, the screen reader says there's 5 groups when there are only 3 (plus 2 separators)

I've handled that one and made the separators visual only for now.

Can you also look at the option of supplying a max-height to the content / viewport? Currently when setting the max-height for the content and attempting to scroll, the container sticks to the bottom of the window.

I don't think I understand what you mean here.

[jjenzz]

Ah I see the issue here... @Kinbaum it would be good to understand your use-case? why do you need to set a max-height?

[benoitgrelard]

This version of Select is designed to function like the MacOS select in terms of UX. So the heuristics are basically to present as many options as possible on the screen whilst maintaining alignment with the trigger as close as possible.

So setting a maxHeight wouldn't be desirable here.

If we provide later a "simpler" version of a select which just displays the items in a dropdown underneath the trigger without alignment then you'd be able to do it and it might make "some" sense to do it in this case as it would all drop down underneath.

[Fumler]

Sorry, but I've also been testing the Select without you releasing it officially yet 😅

https://codesandbox.io/s/clever-edison-nbsy3o?file=/App.js

If you have a Select within a Dialog, and if you then tab to the Select and press enter you are not able to use arrow keys to navigate the items, while outside of the Dialog it works fine.

[benoitgrelard]

Sorry, but I've also been testing the Select without you releasing it officially yet 😅

https://codesandbox.io/s/clever-edison-nbsy3o?file=/App.js

If you have a Select within a Dialog, and if you then tab to the Select and press enter you are not able to use arrow keys to navigate the items, while outside of the Dialog it works fine.

I don't see that issue, what you are describing seems to work fine in the sandbox.

[Fumler]

Sorry, but I've also been testing the Select without you releasing it officially yet 😅 https://codesandbox.io/s/clever-edison-nbsy3o?file=/App.js If you have a Select within a Dialog, and if you then tab to the Select and press enter you are not able to use arrow keys to navigate the items, while outside of the Dialog it works fine.

I don't see that issue, what you are describing seems to work fine in the sandbox.

If you hover the Select it works again, I am using Chrome on Windows 11, maybe unique problem for OS/browser combo?

Precise steps to reproduce: (make sure mouse does not end up hovering the Select viewport)

1. Left click "Edit profile"
2. Press "Enter" on keyboard (Select should open at this point)
3. Use up and down arrow keys (nothing should happen)
4. Hover any Select item with your mouse
5. Use up and down arrow keys (should work now)

I can also click anywhere in the modal, then click the Select, and as long as the mouse is not hovering any item the arrow keys do nothing.

[benoitgrelard]

I can't replicate on Chrome MacOS, I will try it on Windows see if it makes a difference.

[benoitgrelard]

Sorry I can't see it here either, that's Chrome 91 on Windows 11:

https://user-images.githubusercontent.com/1539897/155707031-8a943f76-a399-42aa-a3e4-7ebb8bdbd75b.mov

[Fumler]

Just asked two people on mac to try and reproduce. They were able to reproduce, but the funny part is that the problem only exists when the entire options list is viewable on screen, so e.g. if the window is short enough that the scroll buttons appear, then it works 🤷‍♂️

edit: video

https://user-images.githubusercontent.com/467326/155707969-f1dcd24e-de8b-4c78-aeee-89311481ccd5.mov

[benoitgrelard]

Ah thanks I can see it now. I'll take a look at what's going on.

[Kinbaum]

Ah I see the issue here... @Kinbaum it would be good to understand your use-case? why do you need to set a max-height?

@benoitgrelard @jjenzz i think this is just a matter of visual preference, especially for a really long list of items. Since radix components are just primitives (not opinionated with the css), I would expect to have control over this and have things continue to behave the same (within reason), just like all the other primitives.

[benoitgrelard]

Ah I see the issue here... @Kinbaum it would be good to understand your use-case? why do you need to set a max-height?

@benoitgrelard @jjenzz i think this is just a matter of visual preference, especially for a really long list of items. Since radix components are just primitives (not opinionated with the css), I would expect to have control over this and have things continue to behave the same (within reason), just like all the other primitives.

I understand, this is somewhat less true and more difficult for this one because of how complex the positioning is though. That said we'll see if we can accommodate and worse case I'm sure we'll provide a simpler dropdown version soon.

[benoitgrelard]

@Fumler addressed in #1200

[ajay-jindal]

Facing this issue #1205 with select, hoping you can address it in your remaining tasks.

[tommybarvaag]

Using the official example https://fbwlh5.csb.app/ on mobile iOS Safari I get a weird behaviour where I need to click focus away from the trigger to activate the select content again.

Reproduce

1. load https://fbwlh5.csb.app/ on mobile
2. click select
3. options are shown
4. select value
5. options are hidden and select is focused
6. click select (you can see the black focus border dissapears but no options are shown)
7. click select again
8. Options are shown

https://user-images.githubusercontent.com/24416970/156182631-2006e70d-919c-41c5-9765-65244cfb5f68.mp4

The normal expected behaviour

1. select value
2. select is focused
3. click select and the options are showed again

works in all other dekstop browsers that I have tested.

[acc-nicholas]

I see:

test is it can work with native label and not just our Label

does that mean it already works with radix Label? If so, can you provide an example? My attempt did not work.

[benoitgrelard]

I see:

test is it can work with native label and not just our Label

does that mean it already works with radix Label? If so, can you provide an example? My attempt did not work.

@acc-nicholas Yes it does:

<Label>
  What is your age?
  <Select.Root defaultValue="18-40">
    <Select.Trigger className={triggerClass}>
      …
    </Select.Trigger>
    …
  </Select.Root>
</Label>

// or

<Label htmlFor="age-label">What is your age?</Label>
<Select.Root defaultValue="18-40">
  <Select.Trigger className={triggerClass} id="age-label">
    …
  </Select.Trigger>
  …
</Select.Root>

[UTkzhang]

Is there a way for us to allow scroll outside while the select is open? If not, this feels rather opinionated (the forced focus lock)

[benoitgrelard]

@UTkzhang, at the moment it isn't possible. That being said, if we offered the possibility to go non-modal like other components, this one will have to close on scroll anyway because of the complexity of alignment so not sure how much you'd gain from that being a possibility.

[UTkzhang]

Close on scroll to me seems like a better solution than a force lock

[benoitgrelard]

It's not really about it being a better solution, they are for different concerns. I think there might be a valid point to offer modality support like we do for other primitives, ability to scroll (and scroll on close) is just a part of non-modal mode.

[UTkzhang]

Understood, I am for it

[asherccohen]

Hi, grate job with the new select component! Just what I needed!

I'll drop a few features that would be nice to have that I'm prototyping on top the existing (beta) API:

• Select search: allows to use an input as a trigger and type some text to filter or select an item
• Select multi: allows to select multiple elements and display them as tags
• Select virtual list: allows to very large lists to scroll with no lag
• Select creatable: allows to type text in an input even if not available in the items list and commit it

I've taken inspiration from some popular libraries:

• https://baseweb.design/components/select/
• https://react-spectrum.adobe.com/react-aria/useComboBox.html
• https://react-select.com/home
• https://www.downshift-js.com/downshift#introduction

[billsaysthis]

Select search: allows to use an input as a trigger and type some text to filter or select an item Select multi: allows to select multiple elements and display them as tags Select creatable: allows to type text in an input even if not available in the items list and commit it

These three specifically would be very important for us.

[SebastianGarces]

Having a simpler select would be nice. I have a State select that has 50 options and without a max-height it uses the entire window height... feels odd.

[hdennison]

Hi! Thanks for your work, we are supper happy using Radix since a couple months ago.

Can you please include the multiple attr to this component? :)

[snax4a]

Hi, I would like to ask if you plan to add support for async infinite loading, something like what Adobe React Spectrum Picker has. https://react-spectrum.adobe.com/react-spectrum/Picker.html#asynchronous-loading Their onLoadMore prop is a game changer.

Select components are often used with async lists. Having an option to trigger some action when the scroll position is close to the end allows using infinite loading instead of loading all the options at once.