Replace react-select with something else

[JasonStoltz]

react-select was the only somewhat annoying thing to style over with pure CSS, since it uses inline styling. I’m a bit biased in preferring CSS over CSS-in-JS, but it might be worth considering swapping to another accessible library (e.g. react-responsive-select) that makes our method of overriding styling more coherent.

Additionally, the inline styles cause an issue with CSR.

Relates to #93

[JoseRFelix]

Hey Jason I'll be trying this!

[JoseRFelix]

@JasonStoltz Was checking react-responsive-select and it is not able to change its className. Should we change its default styling or change our CSS?

[cee-chen]

Aw man, that kinda sucks that they don't pass a custom className. If we had to, I'd be fine overriding react-responsive-select's default styling/classes in our CSS files.

Just to throw this out there, one other option (if someone else feels really strongly) could be checking out EUI's Select component? 🤷‍♀

[JasonStoltz]

So what are our big requirements here? I think they are that:

• Should not use inline styles
• Should be accessible

I'd be fine with considering the EUI Select as long as it's possible to use it without requiring all of EUI as a dependency.

[yakhinvadim]

I agree with the accessibility requirement, but why we don't want the select to use inline styles?

the inline styles cause an issue with CSR.

@JasonStoltz What's the issue?
Edit: Oh, nevermind, I found it here #93 (comment)

[yakhinvadim]

Hey @Jfelix61, I see that you created a PR replacing react-select with react-responsive-select. I think changing the underlying UI library is a big change for Search UI, what was your reasoning behind choosing react-responsive-select among other libraries? I want to be sure that we're making the right decision here.

[yakhinvadim]

I think react-responsive-select in the first message was just an example, and we should research other libraries as well.
Another option would be to try to improve the accessibility of react-select by making a PR in their repo.

[JoseRFelix]

Hi @yakhinvadim, I researched other libraries with a screen reader enabled and the one that had the best accessibility was react-select (EUI has good accessibility too, but I can't find if it currently has tree shaking).
Since we are having problems with CSR and one of the best I could find without inline CSS among the others was react-responsive-select, I decided to implement that one, which in my opinion is not as good on accessibility than react-select but better than others. If you or anyone of the team has more suggestions, I will be glad to change it promptly. 😁

[yakhinvadim]

the one that had the best accessibility was react-select

Wow, that's great news!
And it looks like the strict CSP issue is fixed in react-select v3 (We're using v2). Unfortunately, we can't upgrade right now, since that would mean that we'd have to drop support for React <16.8.

But my thinking is that since react-select has the best accessibility out there and strict CSP issue is going to fix itself after we upgrade dependencies, it's probably not worth it to replace the library. I expect that if we replace it, we'd face other issues that are already solved by react-select.

Eager to hear your thoughts.

[JoseRFelix]

That's great to know, I love react-select so I have no problems in keeping it. Then, if it's breaking, it would be better to upgrade for the v2.0 breaking version right?

[yakhinvadim]

Yes, I think so.

[marcvangend]

the one that had the best accessibility was react-select

Wow, that's great news!
And it looks like the strict CSP issue is fixed in JedWatson/react-select#3585 (We're using v2). >Unfortunately, we can't upgrade right now, since that would mean that we'd have to drop support for React <16.8.

I believe search-ui has depended on react ^16.8 for quite a while now. Does that mean it is possible to upgrade to the latest version of react-select? Personally I have no problem with react-select and it looks like the plans to replace it are not moving forward. Meanwhile, react-select has introduced some accessibility improvements I would love to use.

[JasonStoltz]

We updated react-select recently, and it sounds like it's a lot more pleasant to work with: #776.

I'm going to close this issue.