V3

React Responsive Select v2 to v3 upgrade guide

The reason for the breaking change from v2 to v3 is that the CSS structure had to change to support new features that are on the roadmap.

The props api, and functionality are the same as v2.

If you have made custom CSS styles. The changes you'll have to make are fairly trivial. Almost all changes are find-and-replace class name changes.

In 2 cases, the position of where the class now resides in the dom has changed. This may or may not affect you. but keep it in mind.

1. .rrs__select => .rrs - name change

2. .rrs__select-container => .rrs__button - name change

3. .rrs__select-container--disabled => .rrs__button--disabled - name change

4. .rrs__select-container:focus => .rrs__button:focus - name change

5. .rrs__select-container + .rrs__options-container => .rrs__button + .rrs__options - name change

6. .rrs__options-container--visible + .rrs__options-container => .rrs--options-visible .rrs__options - name change, class position change

7. .rrs__is-desktop .rrs__option:hover => .rrs__option:hover - name change

8. .rrs__is-desktop .rrs__option:active => .rrs__option:active - name change

9. .rrs__label-container => .rrs__label - name change

10. .rrs__select-container.rrs__options-container--visible .rrs__label-container, .rrs__select-container:focus .rrs__label-container => .rrs--options-visible .rrs__label, +.rrs__button:focus .rrs__label - name change, class position change

11. .rrs__has-changed .rrs__label-container => .rrs--has-changed .rrs__label - name change

12. .rrs__multiselect__label => .rrs__multiselect-label - name change

13. .rrs__multiselect__label-text => .rrs__multiselect-label__text - name change

14. .rrs__multiselect__label-badge => .rrs__multiselect-label__badge - name change

2.1.0

Add alpha-numeric key events to select boxes. Will select the first item in the list with the pressed key.

2.0.0

Whats new?

This update includes the addition of screen reader accessibility.

Upgrading from v1 to v2

Although the internals (JS and HTML) have changed quite a bit between version 1 and version 2 to make way for screen reader accessibility. The external React API is still the same.

The CSS has changed a bit so if you have overridden the base CSS or written your own CSS, check out the following change-set to see what has changed between version 1 and version 2: 1.5.3...master#diff-00646af4910655f85e372389bf5be2f0. Understanding this change-set will help you upgrade to v2.