fix: Checkbox.Group onChange should not pass removed value

components/checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
 import shallowEqual from 'shallowequal';
@@ -40,7 +41,7 @@ export interface CheckboxChangeEvent {
   nativeEvent: MouseEvent;
 }
 
-export default class Checkbox extends React.Component<CheckboxProps, {}> {
+class Checkbox extends React.Component<CheckboxProps, {}> {
   static Group: typeof CheckboxGroup;
   static defaultProps = {
     indeterminate: false,
@@ -54,6 +55,38 @@ export default class Checkbox extends React.Component<CheckboxProps, {}> {
 
   private rcCheckbox: any;
 
+  constructor(props: CheckboxProps) {
+    super(props);
+    this.state = {
+      prevValue: props.value,
+    };
+  }
+
+  componentDidMount() {
+    const { value } = this.props;
+    const { checkboxGroup = {} } = this.context || {};
+    if (checkboxGroup.registerValue) {
+      checkboxGroup.registerValue(value);
+    }
+  }
+
+  componentDidUpdate({ value: prevValue }: CheckboxProps) {
+    const { value } = this.props;
+    const { checkboxGroup = {} } = this.context || {};
+    if (value !== prevValue && checkboxGroup.registerValue && checkboxGroup.cancelValue) {
+      checkboxGroup.cancelValue(prevValue);
+      checkboxGroup.registerValue(value);
+    }
+  }
+
+  componentWillUnmount() {
+    const { value } = this.props;
+    const { checkboxGroup = {} } = this.context || {};
+    if (checkboxGroup.cancelValue) {
+      checkboxGroup.cancelValue(value);
+    }
+  }
+
   shouldComponentUpdate(
     nextProps: CheckboxProps,
     nextState: {},
@@ -134,3 +167,7 @@ export default class Checkbox extends React.Component<CheckboxProps, {}> {
     return <ConfigConsumer>{this.renderCheckbox}</ConfigConsumer>;
   }
 }
+
+polyfill(Checkbox);
+
+export default Checkbox;

components/checkbox/Group.tsx

@@ -32,7 +32,8 @@ export interface CheckboxGroupProps extends AbstractCheckboxGroupProps {
 }
 
 export interface CheckboxGroupState {
-  value: any;
+  value: CheckboxValueType[];
+  registeredValues: CheckboxValueType[];
 }
 
 export interface CheckboxGroupContext {
@@ -72,6 +73,7 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
     super(props);
     this.state = {
       value: props.value || props.defaultValue || [],
+      registeredValues: [],
     };
   }
 
@@ -82,6 +84,10 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
         value: this.state.value,
         disabled: this.props.disabled,
         name: this.props.name,
+
+        // https://github.com/ant-design/ant-design/issues/16376
+        registerValue: this.registerValue,
+        cancelValue: this.cancelValue,
       },
     };
   }
@@ -90,6 +96,17 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
     return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
   }
 
+  registerValue = (value: string) => {
+    this.setState(({ registeredValues }) => ({
+      registeredValues: [...registeredValues, value],
+    }));
+  };
+  cancelValue = (value: string) => {
+    this.setState(({ registeredValues }) => ({
+      registeredValues: registeredValues.filter(val => val !== value),
+    }));
+  };
+
   getOptions() {
     const { options } = this.props;
     // https://github.com/Microsoft/TypeScript/issues/7960
@@ -105,6 +122,7 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
   }
 
   toggleOption = (option: CheckboxOptionType) => {
+    const { registeredValues } = this.state;
     const optionIndex = this.state.value.indexOf(option.value);
     const value = [...this.state.value];
     if (optionIndex === -1) {
@@ -117,7 +135,7 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
     }
     const onChange = this.props.onChange;
     if (onChange) {
-      onChange(value);
+      onChange(value.filter(val => registeredValues.indexOf(val) !== -1));
     }
   };
 

components/checkbox/__tests__/group.test.js

@@ -111,4 +111,26 @@ describe('CheckboxGroup', () => {
     expect(onChange).toHaveBeenCalled();
     expect(onChange.mock.calls[0][0].target.value).toEqual('my');
   });
+
+  // https://github.com/ant-design/ant-design/issues/16376
+  it('onChange should filter removed value', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Checkbox.Group defaultValue={[1]} onChange={onChange}>
+        <Checkbox key={1} value={1} />
+        <Checkbox key={2} value={2} />
+      </Checkbox.Group>,
+    );
+
+    wrapper.setProps({
+      children: [<Checkbox key={2} value={2} />],
+    });
+
+    wrapper
+      .find('.ant-checkbox-input')
+      .at(0)
+      .simulate('change');
+
+    expect(onChange).toHaveBeenCalledWith([2]);
+  });
 });