Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Update react-select to Latest #14490

Closed
2 tasks
jcq opened this issue Jun 8, 2020 · 1 comment
Closed
2 tasks

Update react-select to Latest #14490

jcq opened this issue Jun 8, 2020 · 1 comment
Assignees
@jcq
Labels
Eng: Frontend Work Group frontend engineering task Team: Foxtrot 🦊 Type: Tech-Improvement

Comments

@jcq
Copy link
Contributor

jcq commented Jun 8, 2020 •
edited
Loading

Description

We are using a very outdated version of react-select (v1.0.0-rc.4), which was released over 3 years ago. We should update to the latest for performance, accessibility, and other improvements

Acceptance criteria

  • Update react-select to latest
  • Make any necessary changes to SearchableDropdown

Background/context/resources

Technical notes

This is used indirectly in a number of places, but ultimately all via SearchableDropdown. This upgrade will likely also alleviate the need for this "temp fix".
@jcq jcq mentioned this issue Jun 8, 2020
Closed
2 tasks
@leikkisa leikkisa mentioned this issue Jun 15, 2020
Closed
@jcq jcq self-assigned this Jun 16, 2020
@jcq
Copy link
Contributor Author

jcq commented Jun 17, 2020

Accessibility Issues

Here are various issues identified by axe automated testing (as seen via Storybook):

With default value

Screen Shot 2020-06-17 at 12 59 46

With readOnly prop set (disabled passed to react-select)

Screen Shot 2020-06-17 at 13 02 48

@jcq jcq mentioned this issue Jun 23, 2020
Merged
4 tasks
va-bot pushed a commit that referenced this issue Jul 7, 2020
@jcq
Bump react-select and Update SearchableDropdown (#14579)
8ab2355 
Connects #14490

### Description
This bumps `react-select` to the current version (3.1.0), updates `SearchableDropdown` to match new syntax and imports, sets up new SCSS styles due to changes in `react-select`, and adjusts the async functions of the few components that use it when calling `SearchableDropdown`. 


### Acceptance Criteria
- [ ] Code compiles correctly
- [ ] Styling of controls remain visually the same
- [ ] Components that use `async` prop of `SearchableDropdown` are updated to return just the array of options rather than wrapped in an object
- [ ] Accessibility checks pass
@leikkisa leikkisa closed this as completed Jul 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jcq jcq

Labels
Eng: Frontend Work Group frontend engineering task Team: Foxtrot 🦊 Type: Tech-Improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jcq @leikkisa