Repository: mlaursen/react-md (ts)

Issue:
[SelectionControlGroup] Comma-delimited list not working as expected
**Describe the bug**
In a SelectionControlGroup of type `checkbox`, when two values are checked, deselecting the second value results in `onChange` being called with `value1,` (with a comma) instead of `value1`. 

**Expected behavior**
happen.
It shouldn't matter if I select a value at the back of the list.

If needd, I can provide a code sample later.

If this bug is confirmed, I can open a PR to fix it. If I'm not mistaken, it's just a wrong RegExp.

Pull request:
Fix #862 SelectionControlGroup's comma-delimited list for checkboxes
Prior to this change, when switching from `'value_1,value_2'` to 'value_1' (unchecking `'value_2'`), the comma was not deleted, resulting in values like `'value_1,,,value_2'` etc.

I fixed it by being super explicit with the regex. There might be a regex that's cleverer or shorter, but I didn't think it was worth it

Patch:
diff --git a/src/js/SelectionControls/SelectionControlGroup.js b/src/js/SelectionControls/SelectionControlGroup.js
index f5de3b71e0..6d7daf9c6c 100644
--- a/src/js/SelectionControls/SelectionControlGroup.js
+++ b/src/js/SelectionControls/SelectionControlGroup.js
@@ -338,7 +338,7 @@ export default class SelectionControlGroup extends PureComponent {
       if (!existsIndex && checked) {
         value = `${currentValue ? `${currentValue},` : ''}${value}`;
       } else if (existsIndex > -1 && !checked) {
-        value = currentValue.replace(new RegExp(`${value},?`), '');
+        value = currentValue.replace(new RegExp(`${value},|,${value}|^${value}$`), '');
       } else {
         value = currentValue;
       }


Test patch:
diff --git a/src/js/SelectionControls/__tests__/SelectionControlGroup.js b/src/js/SelectionControls/__tests__/SelectionControlGroup.js
index 7511950298..41c3bf0196 100644
--- a/src/js/SelectionControls/__tests__/SelectionControlGroup.js
+++ b/src/js/SelectionControls/__tests__/SelectionControlGroup.js
@@ -23,6 +23,10 @@ const PROPS_2 = Object.assign({}, PROPS, {
   controls: PROPS.controls.concat([{ value: 'something', label: 'Something' }]),
 });
 
+const PROPS_3 = Object.assign({}, PROPS_2, {
+  controls: PROPS_2.controls.concat([{ value: 'third', label: 'Third' }]),
+});
+
 describe('SelectionControlGroup', () => {
   it('merges className and style', () => {
     const props = Object.assign({}, PROPS, {
@@ -381,4 +385,30 @@ describe('SelectionControlGroup', () => {
     expect(onChange).toBeCalledWith('something', event3);
     expect(group.state('value')).toBe('something');
   });
+
+  it('correctly builds the comma-delimited list when the type is checkbox', () => {
+    const onChange = jest.fn();
+    const group = mount(<SelectionControlGroup {...PROPS_3} onChange={onChange} />);
+
+    const check = value =>
+      group.instance()._handleChange({ target: { checked: true, value } });
+
+    const uncheck = value =>
+      group.instance()._handleChange({ target: { checked: false, value } });
+
+    check('eyyy');
+    check('something');
+    check('third');
+    expect(group.state('value')).toBe('eyyy,something,third');
+
+    uncheck('something');
+    expect(group.state('value')).toBe('eyyy,third');
+
+    uncheck('third');
+    expect(group.state('value')).toBe('eyyy');
+
+    check('third');
+    uncheck('eyyy');
+    expect(group.state('value')).toBe('third');
+  });
 });