Skip to content

Conversation

@WesSouza
Copy link
Member

@WesSouza WesSouza commented Aug 9, 2022

Work in progress for Select component refactor:

  • Moves <Select native> to <SelectNative>
  • Extract logic from Select into useSelectState hook (only used by Select)
  • Extract common components and prop handling into useSelectCommon (used by both selects)
  • Change onChange callback to pass selected option as the first argument
  • Change all custom callbacks to receive { fromEvent: Event | React.SyntheticEvent } as the last argument (onOpen, onClose, onChange)
  • Changed spread props to spread on the StyledInner component instead of input (replaces SelectDisplayProps prop)
  • Added inputProps to allow spreading of props on the input element
  • Deprecated labelId in favor of aria-labelledby
  • Enforced strict select value matching, where the option value is not coerced arbitrarily anymore
  • Improved keyboard handling, including support for Home, End, Enter and Escape keys
  • Support typing to select (closed menu) or activate (open menu) an option, by word or cycling through words that start with the repeated letter
  • Enhanced "scroll to option" behavior to keep the active option touching the top or bottom of the scrollable list

I've also changed the Select story to list all Pokémon, so typing can be tested.

Storybook

@WesSouza WesSouza self-assigned this Aug 9, 2022
@vercel
Copy link

vercel bot commented Aug 9, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
react95 ✅ Ready (Inspect) Visit Preview Aug 13, 2022 at 11:44PM (UTC)

… correctly

Code coverage depends on TypeScript sourceMap, which we disabled for builds.
… if value is set without onChange or readOnly
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 12, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4bceb5a:

Sandbox Source
React95 template Configuration

…Native

BREAKING CHANGE: Select props changed significantly, native is now the SelectNative component
@WesSouza WesSouza force-pushed the refactor/wes/select-improved branch from 282ac81 to 4bceb5a Compare August 13, 2022 23:43
@WesSouza WesSouza marked this pull request as ready for review August 13, 2022 23:43
@WesSouza WesSouza changed the title (wip) refactor(select): improve keyboard and events refactor(select): improve keyboard and events Aug 13, 2022
@arturbien arturbien merged commit 107fe15 into beta Sep 10, 2022
@arturbien arturbien deleted the refactor/wes/select-improved branch September 10, 2022 15:19
@github-actions
Copy link

🎉 This PR is included in version 4.0.0-beta.13 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link

🎉 This PR is included in version 4.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants