Fix styling on <select> elements

[ragesoss]

Using native <select> elements, as we do on many forms, makes it difficult to style the inputs. In particular, the dropdowns use the native browser / OS styling that can't be changed with CSS.

Where we use the react-select library, we have control over the styling, like this:

But for native elements, we get colors that don't match the rest of the system:

Probably the easiest solution will be to replace uses of plain <select> with react-select components.

[shivanshbindal9]

I would love to work on this! Could you please point me in the right direction? @ragesoss

[ragesoss]

It was supposed to be select rather than input. Whoops!

@shivanshbindal9 if you're already familiar with React, the outline of this task is something like:

• Look at a component that already uses react-select, like MultiSelectField
• Look at a component that uses plain select elements, like CourseTypeSelector
• Replace select with the appropriately configured react-select Select component in that component, making sure that the input still updates as expected. This may require updating the onChange handler.
• Submit a first PR to change just that one component, and once we see that it works smoothly, a subsequent PR can be done to update the rest of the cases of <select>.

[shivanshbindal9]

#2314 I tried to fix the issue for CourseTypeSelector! @ragesoss

[ragesoss]

Looks like the jest test for that will need to be updated. yarn test will run the javascript tests; you should take a look at the file for the failing test and see if you can update it for the implementation.

[shivanshbindal9]

#2314 I have added tests for Select in course_type_selector!! @ragesoss

[shivanshbindal9]

#2331 I have added react-select in home_wiki_project_selector! @ragesoss

[shivanshbindal9]

#2380 adds react-select in yes_no_selector!! @ragesoss Can you also please send me a slack invite . I would like to contribute to this project.

[ragesoss]

Sure! Send me an email to sage at wikiedu.org.

[shivanshbindal9]

#2410 addresses the issue that first option was selected even if any other option was selected. Also, can you please tell me other places where we need to change <select> to react-select .

[ragesoss]

@shivanshbindal9 I think pretty much everywhere that uses <select right now could potentially benefit from switching.

Many of the cases we have left are for table sorting, like in UploadsHandler, RevisionsHandler, ArticlesHandler, and AlertsHandler.

Others are more similar the ones you already did: CourseLevelSelector, HomeWikiLanguageSelector, and BlockTypeSelect.

[shivanshbindal9]

#2413 add react-select in home_wiki_language_selector. Also, do we need to change all the instances where we have used componentWillMount() ?

[shivanshbindal9]

#2424 add react-select in block_type_selector.

[Arpitpundir]

@ragesoss can i work on this?

[ragesoss]

@shivanshbindal9 eventually, yes, we'll need to replace all uses of componentWillMount. If it's part of the same component that you're updating for select, then it's find to combine that fix into the PR.

@Arpitpundir maybe better to work on a different issue, as Shivansh is working through the select elements already.

[shivanshbindal9]

@ragesoss I am not able to select the course level when creating a new course. Can you please help !!

[ragesoss]

To get that selector, you need to have wiki_education: 'true' set in application.yml, so that you get the version of that form that is tailored to university courses.

[shivanshbindal9]

#2430 add react-select in course_level_selector !!

[shivanshbindal9]

@ragesoss Sir, are there still any <select> elements remaining that need to replaced except for the ones left for table sorting ?

[shivanshbindal9]

@ragesoss sir, sorry for not working on this for a long time as I had my university exams. Actually, when I am trying to use react-select for table sorting I am having some issues. Basically, when we use react-select various css components such as the dropdown icon, the input field all are wrapped inside div and it becomes difficult to remove them and add an image since there is a hierarchy of div .Also, I have gone through their documentation and couldn't find a similar use case. I'll be highly grateful if you could look into this and suggest some better method to implement the same.

[ragesoss]

@shivanshbindal9 interesting. It might not be possible with that library, I guess? I suggest opening an issue at react-select to describe what you're trying to do and ask if there's a way.

If not, it's not a big deal; the sort selector is the least noticable.

[HARSHITHASALADI1]

Could you please assign me this task?

[Priyanshu-su30]

Can I work on this issue??

[ragesoss]

@Priyanshu-su30 sure, give it a try. A good way to begin might be to identify remaining select elements and add screenshots to show how they currently are styled, it looks like a few of them may have already been changed since the issue was opened.

[Priyanshu-su30]

@ragesoss can u provide me the slack link I can't find it

[ragesoss]

@Priyanshu-su30 let me know your email address and I can send you an invite.

[Priyanshu-su30]

@ragesoss Sure my email address is: [email protected]