[API] Single Select Component #140

segunadebayo · 2019-10-03T14:54:59Z

Following our discussion in Issue #38. I thought to put down my thoughts about
the Single Select component and the API I have in mind.

NB: I know there are other use cases, like Multiple Selects and ComboBox, but
we're keeping it simple for now. We'll start with a Single Select Component

The Goal:

Create a select component that works just like the native select and accessible,
composable and super easy to style.

The single select will follow WAI-ARIA specs for the list box pattern. These are the
key resources we need to create this Select

Key Features:

Typeahead support: When the select is open and focus is on the select list box
- Typing the first letter of an option sends focus to that option.
- Type multiple characters in rapid succession: focus moves to the next item
  with a name that starts with the string of characters typed.
Keyboard navigation:
- Using the up and down arrow should navigate the options. Any option that's
  disabled should be skipped in the navigation.
- The Home and End key should select the first and last option respectively.
Scrolling into view: In the event, the options are quite many and we navigate
via keyboard or typeahead, any option is focused that isn't (fully) visible
should be scrolled into view. Perhaps scroll-into-view-if-needed might help.
Auto select:
- If autoSelect is true, highlighting an option must also select that option
- If autoSelect is false, a highlighted option must be manually selected
  using the SPACEBAR or ENTER key.
Virtualize Menu: If there's a large number of options, we might need to
improve render performance by using react-virtualized

Import

Component Parts:

Select: The wrapper that provides the context and functionalities
SelectControl: The element that triggers the list box. By default, it renders a
button but can also use a render prop in case user needs full control of the rendering.
SelectMenu: The wrapper for the popover. It composes the Popper component.
It can also use a render prop incase user needs access to the interal state.
SelectMenuList: The listbox that wraps the options. It provides the keyboard
navigation and typeahead functions.
SelectIndicator: The wrapper for the dropdown icon.
SelectOption: Each option in the select.
SelectOptionGroup: A wrapper for a set of options that can be labeled. Similar
to the <optgroup> in the native browser select.

Usage

<Select>
  <SelectControl>
    <SelectLabel>Option 1</SelectLabel>
    <SelectIndicator>
      <Icon name="down-up-arrow" />
    </SelectIndicator>
  </SelectControl>
  <SelectMenu>
    <SelectMenuList>
      <SelectOption value="opt1">SelectOption 1</SelectOption>
      <SelectOption value="opt2">SelectOption 2</SelectOption>
      <SelectOption value="opt3">SelectOption 3</SelectOption>
    </SelectMenuList>
  </SelectMenu>
</Select>

The Select should also be able to render an option group. If passed
isDisabled, the options should also be disabled.

<Select defaultIsOpen={true} defaultValue="css">
  <SelectControl>Select Option</SelectControl>
  <SelectMenu>
    <SelectMenuList>
      <SelectOption value="html">HTML</SelectOption>
      <SelectOption value="css">CSS</SelectOption>
      <SelectOptionGroup label="Frameworks" isDisabled>
        <SelectOption value="react">React</SelectOption>
        <SelectOption value="vue">Vue</SelectOption>
        <SelectOption value="angular">Angular</SelectOption>
      </SelectOptionGroup>
    </SelectMenuList>
  </SelectMenu>
</Select>

Props

Select Props (Provides Context)

defaultIsOpen: If true, the select should be open initially.
isOpen: If true, the select should be open in controlled mode.
defaultHighlightedIndex: the index of the item that should be highlighted
initially.
autoSelect: If true, the option will be selected as you navigate through
them.
closeOnBlur: If true, the select menu will close on blur or outside click
closeOnEsc: If true, the select menu will close when you press escape
closeOnSelect: If true, the select menu will close when you select an
option.
defaultValue: The initial selected value
value: The selected value
onChange: Callback fired when an option is selected
isDisabled: If true the select control will be disabled
isInvalid: If true, the select control will have aria-invalid set to true
isReadOnly: If true, the select will be in read-only mode
children: the content of the select. It can also take a render prop that
provides:
- selectedItem
- highlightedIndex
- isOpen
- onClose

SelectOptionGroup Props (composes Box)

isDisabled: If true, all the SelectOption that it wraps will be disabled
label: The label for the option group

SelectOption Props (composes PseudoBox)

isSelected
isHighlighted
value
children

The text was updated successfully, but these errors were encountered:

aaronmcadam · 2019-10-03T15:38:38Z

My biggest concern with the Select component is whether it will be easy to test in unit tests with Jest and End to End tests with Cypress. react-select, as least in version 2, makes it very hard to choose items.

Here's an example:

/**
 * Create a Project
 */
cy.getByTestId("button-add-project").click();
cy.getByTestId("input-project-title").type("E2E Test Project");
cy.getByTestId("button-wizard-next").click();
cy.getByTestId("input-project-description").type(
  "E2E Test Project description"
);
cy.getByTestId("button-wizard-next").click();
cy.getByTestId("select-agency").click();
// Choose 'Testing Agency'
cy.get("#react-select-2-option-4").click();

/**
 * Clicking multiple times makes this test more resilient
 * @see https://github.com/cypress-io/cypress/issues/1486#issuecomment-450151465
 * @see https://github.com/cypress-io/cypress/pull/2982
 */
cy.getByTestId("select-client")
  .click()
  .click()
  .click();
// Choose 'Testing Client'
cy.get("#react-select-3-option-0").click();

cy.getByTestId("button-wizard-next").click();
cy.getByTestId("select-template")
  .eq(0)
  .click();
cy.getByTestId("button-wizard-complete").click();

I'm hoping your approach of putting accessibility first (which is really great!) will mean this won't be a concern!

aaronmcadam · 2019-11-28T14:10:25Z

Did we get anywhere with this component @segunadebayo? Did you find any third party components that might fit in with Chakra? I need to implement a single select in my current project so I'm just about to start researching. If I find anything good, I could post it here if that would help?

segunadebayo · 2019-11-28T17:57:39Z

Hi @aaronmcadam,

I've built a custom select already, it's in the dev-ts branch, but it needs some cleanup and type definition. It'll be in the next release.

However, if you find an implementation other than react-select or downshift please let me know.

aaronmcadam · 2019-11-28T18:06:46Z

Hi @segunadebayo, thanks for getting back to me. I ended up using an old component we had that uses react-select. It is an older 1.x version with the testing problems mentioned above. I don't know if react-select v2 produces more semantic markup or is less flaky in tests.

That's great news that you've got something working in the TypeScript branch. I'd like to give you a hand with some of the work when I get a chance.

aaronmcadam · 2019-11-28T18:09:15Z

I did have a look at Reach UI's Combobox, and while it's a great example of how to build an accessible and testable component, it didn't fit my simple needs and the needs of this RFC.

segunadebayo · 2019-11-28T20:11:40Z

I'm curious @aaronmcadam. What do you mean by "simple needs"? Just to be sure what I've worked on covers this 😄

aaronmcadam · 2019-11-28T21:17:20Z

I'm curious @aaronmcadam. What do you mean by "simple needs"? Just to be sure what I've worked on covers this

The same needs as mentioned above: just a select component that allows you choose from a list of options. The combobox is more of an extended text input, in that you can choose an option or type your own value. Does that make sense?

aaronmcadam · 2019-11-28T21:19:29Z

@segunadebayo I do need to be able to have a more complex option than just text though. In my case I need to have an icon beside some text. I'm AFK at the moment but I'll attach a screenshot tomorrow

segunadebayo · 2019-11-28T21:33:25Z

@aaronmcadam. I've got you covered then.

aaronmcadam · 2019-11-29T12:18:05Z

@segunadebayo For clarity, here's my use case:

segunadebayo · 2019-11-29T14:48:44Z

@aaronmcadam There won't be an input to search options in the SimpleSelect I've worked on. What I have mimics native HTML select and supports typeahead/rapid typeahead.

Martinnord · 2020-01-14T19:39:09Z

Hello!

Are there any updates on this? It would be really cool to have this in this awesome lib!

Cheers!

segunadebayo · 2020-01-16T13:19:07Z

Hi @Martinnord, The select component is in progress, you can track it in the dev-ts branch. I believe the first version will be out in our next release.

Martinnord · 2020-01-17T18:22:26Z

@segunadebayo Cool! Will keep an eye on that branch!

Enigma10 · 2020-03-03T06:09:39Z

@segunadebayo I want to help you this component. Can you guide me?. I am beginner in open source.

segunadebayo · 2020-04-15T07:26:41Z

@Enigma10, Thanks for offering to help. For now, we've de-scoped the Select component to help us focus on the next major release.

Once we get back to it, I'll drop a comment here so I can guide you.

Cheers.

adrianoresende · 2020-08-11T20:05:39Z

Hello there,

@segunadebayo We decided to use your Chakra as the initial DS, congratulations on your project, it's great. 👏

So, we missed the searchable select and I read the issue here and we want to know if it has ETA to launch?

We can access the component to see if we can help?

tomdohnal · 2020-11-20T11:19:12Z

@segunadebayo
Hi, now that the v1 is released (congrats!), is this component something you would consider adding to the library?
I'd be happy to help you out with that if that's something you'd consider.

TaylorFacen · 2021-03-23T13:30:13Z

Hi! I'm checking in to see if there's a plan to implement a searchable select? styling with react-select is 👎🏾

csandman · 2021-04-05T16:11:20Z

@TaylorFacen You should check out my wrapper for react-select. I spent a decent amount of time replacing the react-select styles with the chakra ones, in some cases just replacing the components entirely.

EDIT

I've noticed that this has gotten a positive reception so I figured I'd post an update. The wrapper I posted is now updated to more accurately work with the react-select controls, and also now has a size prop! it can accept sm, md, and lg and it reflects the sizes of the normal chakra text input. I also included a wrapper for the async version.

EDIT 2

I made it into an NPM package! https://www.npmjs.com/package/chakra-react-select

onurbamaro · 2021-04-22T22:48:42Z

@TaylorFacen You should check out my wrapper for react-select. I spent a decent amount of time replacing the react-select styles with the chakra ones, in some cases just replacing the components entirely.

Gist: https://gist.github.com/csandman/c687a9fb4275112f281ab9a5701457e4

CodeSandbox: https://codesandbox.io/s/chakra-ui-react-select-648uv?file=/multi-select.js

Nice job! I'm kinda new to software development and a documentation on this would be nice. Do you have any? If not, could help me with something?

Thanks in advance

csandman · 2021-04-22T22:53:48Z

@onurbamaro I don't have any documentation but it should take the same props as the original package. As long as you have react-select and chakra installed, just copy the multi-select component into your app somewhere and import it instead of react-select. The rest of the docs can be found at the react-select website: https://react-select.com/home.

If you have a specific question, feel free to ask!

onurbamaro · 2021-04-22T23:00:42Z

@onurbamaro I don't have any documentation but it should take the same props as the original package. As long as you have react-select and chakra installed, just copy the multi-select component into your app somewhere and import it instead of react-select. The rest of the docs can be found at the react-select website: https://react-select.com/home.

If you have a specific question, feel free to ask!

Oh, now I get it. That's what I was looking for! Thank you and nice job once again, this is going to help a lot!

csandman · 2021-04-23T18:13:07Z

@onurbamaro You're welcome!

tannerbaum · 2021-07-15T08:53:48Z

@segunadebayo Has there been any consideration into expanding the select component to include search of extending it in a new component?

@csandman did great work on his own solution, but having something directly from Chakra without relying on React-Select that is also in the Chakra TS ecosystem would be nice.

csandman · 2021-07-15T20:42:26Z

@tannerbaum I definitely agree that it would be great to have a combobox type component native to the Chakra lib, the component I made was only ever supposed to be a holdover until something like that exists

aaronmcadam · 2021-07-16T09:32:44Z

@tannerbaum There's been some experiments using Downshift on Chakra UI Pro. I've not had a chance to play with the component yet, though. But if the component is stable enough, it may make its way into the library.

alexkreidler · 2021-08-28T21:41:43Z

There's also a project that's focused on autocomplete features that uses the Downshift library's ComboBox:

https://github.com/koolamusic/chakra-ui-autocomplete

csandman · 2021-09-22T00:19:50Z

For anyone that has had any interest in my wrapper for react-select, I made it into an NPM package. You can find it here: https://www.npmjs.com/package/chakra-react-select

emvictor · 2021-10-26T18:45:41Z

@csandman My team and I are using your wrapper in our project. Any hints on testing it with jest/enzyme? It's actually a component with parts of your code from codesandbox

csandman · 2021-10-26T19:27:09Z

@emvictor sorry, can't really help you there, I've never done a lot of testing. I've only used jest in one project and I never got that far with it.

csandman · 2022-01-10T22:44:16Z

There have been some major improvements in version 2 and version 3 of my chakra-react-select package, allowing for a fully customizable style system, and the native typescript support added in react-select@5. So if my component didn't feel customizable enough at first, or you had issues implementing it in a TypeScript project, I highly recommend giving it a second chance.

segunadebayo added the Type: API discussion 💡 It's just a idea worth looking into, but doesn't mean it's priority. label Oct 3, 2019

segunadebayo mentioned this issue Oct 14, 2019

[Popover] Would like to get more information regarding the help needed with the Popover component #177

Closed

eshlox mentioned this issue Nov 9, 2019

Use select component from chakra-ui eshlox/gatsby-theme-axii#5

Closed

This was referenced Dec 2, 2019

Select component #38

Closed

[Select] backgroundColor not forwarded to element #275

Closed

segunadebayo closed this as completed Apr 15, 2020

anuraghazra mentioned this issue Sep 15, 2020

[RFC] Select Component ariakit/ariakit#739

Closed

manzoorwanijk mentioned this issue Dec 21, 2020

Create New Inline Edit Multi Option Select Input eventespresso/barista#515

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[API] Single Select Component #140

[API] Single Select Component #140

segunadebayo commented Oct 3, 2019

aaronmcadam commented Oct 3, 2019 •

edited

Loading

aaronmcadam commented Nov 28, 2019 •

edited

Loading

segunadebayo commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

segunadebayo commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

segunadebayo commented Nov 28, 2019

aaronmcadam commented Nov 29, 2019

segunadebayo commented Nov 29, 2019

Martinnord commented Jan 14, 2020

segunadebayo commented Jan 16, 2020

Martinnord commented Jan 17, 2020

Enigma10 commented Mar 3, 2020

segunadebayo commented Apr 15, 2020

adrianoresende commented Aug 11, 2020 •

edited

Loading

tomdohnal commented Nov 20, 2020

TaylorFacen commented Mar 23, 2021

csandman commented Apr 5, 2021 •

edited

Loading

onurbamaro commented Apr 22, 2021

csandman commented Apr 22, 2021

onurbamaro commented Apr 22, 2021

csandman commented Apr 23, 2021

tannerbaum commented Jul 15, 2021

csandman commented Jul 15, 2021

aaronmcadam commented Jul 16, 2021

alexkreidler commented Aug 28, 2021

csandman commented Sep 22, 2021

emvictor commented Oct 26, 2021 •

edited

Loading

csandman commented Oct 26, 2021

csandman commented Jan 10, 2022

[API] Single Select Component #140

[API] Single Select Component #140

Comments

segunadebayo commented Oct 3, 2019

The Goal:

Key Features:

Import

Usage

Props

Select Props (Provides Context)

SelectOptionGroup Props (composes Box)

SelectOption Props (composes PseudoBox)

aaronmcadam commented Oct 3, 2019 • edited Loading

aaronmcadam commented Nov 28, 2019 • edited Loading

segunadebayo commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

segunadebayo commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

aaronmcadam commented Nov 28, 2019

segunadebayo commented Nov 28, 2019

aaronmcadam commented Nov 29, 2019

segunadebayo commented Nov 29, 2019

Martinnord commented Jan 14, 2020

segunadebayo commented Jan 16, 2020

Martinnord commented Jan 17, 2020

Enigma10 commented Mar 3, 2020

segunadebayo commented Apr 15, 2020

adrianoresende commented Aug 11, 2020 • edited Loading

tomdohnal commented Nov 20, 2020

TaylorFacen commented Mar 23, 2021

csandman commented Apr 5, 2021 • edited Loading

onurbamaro commented Apr 22, 2021

csandman commented Apr 22, 2021

onurbamaro commented Apr 22, 2021

csandman commented Apr 23, 2021

tannerbaum commented Jul 15, 2021

csandman commented Jul 15, 2021

aaronmcadam commented Jul 16, 2021

alexkreidler commented Aug 28, 2021

csandman commented Sep 22, 2021

emvictor commented Oct 26, 2021 • edited Loading

csandman commented Oct 26, 2021

csandman commented Jan 10, 2022

aaronmcadam commented Oct 3, 2019 •

edited

Loading

aaronmcadam commented Nov 28, 2019 •

edited

Loading

adrianoresende commented Aug 11, 2020 •

edited

Loading

csandman commented Apr 5, 2021 •

edited

Loading

emvictor commented Oct 26, 2021 •

edited

Loading