Merge pull request #84 from coreui/fix-switch

v2.5.2

Author: xidedix

CHANGELOG.md

@@ -1,7 +1,23 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
-##### `v2.5.1`
+##### `v2.5.2`
+- fix(Switch): does not provide any keyboard accessibility - thanks @roastery-zz close #44
+- fix(Switch): checked props and state out of sync - thanks @gravitymedianet @jinixx
+- fix(Switch): uncontrolled mode with defaultChecked 
+
+###### dependencies update
+- update `core-js` to `^2.6.9`
+- update `react-perfect-scrollbar` to `^1.5.3`
+- update `reactstrap` to `^8.0.1"
+- update `babel-eslint` to `^10.0.2`
+- update `enzyme` to `^3.10.0`
+- update `enzyme-adapter-react-16` to `^1.14.0`
+- update `eslint-plugin-import` to `^2.18.2`
+- update `eslint-plugin-react` to `^7.14.3`
+- update `react-router-dom` to `^5.0.1`
+- update `webpack-dev-server` to `^3.7.2`
 
+##### `v2.5.1`
 - fix(SidebarNav): add missing `class` and `attributes` to navDropdown item 
 - fix(HeaderDropdown): add missing Dropdown.propTypes
 - refactor(demo): AppHeaderDropdown remove style right auto

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -37,30 +37,30 @@
   "dependencies": {
     "@coreui/icons": "0.3.0",
     "classnames": "^2.2.6",
-    "core-js": "^2.6.8",
+    "core-js": "^2.6.9",
     "prop-types": "^15.7.2",
     "react-onclickout": "^2.0.8",
-    "react-perfect-scrollbar": "^1.5.2",
-    "reactstrap": "^7.1.0"
+    "react-perfect-scrollbar": "^1.5.3",
+    "reactstrap": "^8.0.1"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^2.1.9",
+    "@coreui/coreui": "^2.1.12",
     "react": "^16.8.6",
-    "react-router-dom": "^5.0.0"
+    "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.1",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.13.1",
+    "babel-eslint": "^10.0.2",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.16.0",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-react": "^7.14.3",
     "nwb": "^0.23.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.0",
+    "react-router-dom": "^5.0.1",
     "sinon": "^5.1.1",
-    "webpack-dev-server": "^3.4.1"
+    "webpack-dev-server": "^3.7.2"
   },
   "repository": {
     "type": "git",

src/Switch.js

@@ -33,9 +33,9 @@ const defaultProps = {
   outline: false,
   size: '',
   checked: false,
-  defaultChecked: false,
-  disabled: false,
-  required: false,
+  defaultChecked: undefined,
+  disabled: undefined,
+  required: undefined,
   type: 'checkbox',
   variant: '',
   dataOn: 'On',
@@ -45,35 +45,54 @@ const defaultProps = {
 class AppSwitch extends Component {
   constructor(props) {
     super(props);
-    this.onChange = this.onChange.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
     this.state = {
+      uncontrolled: !!this.props.defaultChecked,
       checked: this.props.defaultChecked || this.props.checked,
       selected: []
     };
   }
 
-  onChange(event) {
-    const target = event.target;
+  toggleState(check) {
     this.setState({
-      checked: target.checked,
+      checked: check
     })
+  }
+
+  handleChange(event) {
+    const target = event.target;
+    this.toggleState(target.checked)
 
     if (this.props.onChange) {
       this.props.onChange(event);
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.checked !== prevProps.checked) {
-      this.setState({
-        checked: this.props.checked
-      })
+  handleKeyDown(event) {
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+
+  handleKeyUp(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.toggleState(!this.state.checked);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!this.state.uncontrolled && (this.props.checked !== prevState.checked)) {
+      this.toggleState(this.props.checked)
     }
   }
 
   render() {
     const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props;
 
+    const tabindex = attributes.tabIndex
+    delete attributes.tabIndex
     delete attributes.checked
     delete attributes.defaultChecked
     delete attributes.onChange
@@ -98,8 +117,19 @@ class AppSwitch extends Component {
     );
 
     return (
-      <label className={classes}>
-        <input type={type} className={inputClasses} onChange={this.onChange} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} {...attributes} />
+      <label className={classes} tabIndex={tabindex} onKeyUp={this.handleKeyUp} onKeyDown={this.handleKeyDown}>
+        <input type={type}
+               className={inputClasses}
+               onChange={this.handleChange}
+               checked={this.state.checked}
+               name={name}
+               required={required}
+               disabled={disabled}
+               value={value}
+               aria-checked={this.state.checked}
+               aria-disabled={disabled}
+               aria-readonly={disabled}
+               {...attributes} />
         <span className={sliderClasses} data-checked={dataOn} data-unchecked={dataOff}></span>
       </label>
     );

tests/Switch.test.js

@@ -60,8 +60,8 @@ describe('AppSwitch', () => {
         expect(onChangeMock.called).toBe(true);
       });
 
-      it('should call onChange()', () => {
-        const onChange = spy(AppSwitch.prototype, 'onChange');
+      it('should call handleChange()', () => {
+        const onChange = spy(AppSwitch.prototype, 'handleChange');
         const event = { target: { checked: true } };
         const wrapper = shallow(<AppSwitch label size="lg" />);
         expect(wrapper.find('input').props().checked).toBe(false);