Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

refactor(select): improve keyboard and events #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: Beta
arturbien merged 3 commits into beta from refactor/wes/select-improved
Sep 10, 2022

Conversation

@WesSouza
Copy link
Member

@WesSouza WesSouza commented Aug 9, 2022
edited
Loading

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

Copy link

vercel bot commented Aug 9, 2022
edited
Loading

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.
Copy link

codesandbox-ci bot commented Aug 12, 2022
edited
Loading

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
Copy link

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

The release is available on:

Your semantic-release bot 📦🚀

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

Reviewers

@arturbien arturbien arturbien approved these changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /