Return empty array when Array knob is empty

storybookjs · Sep 7, 2017 · cba07ad · cba07ad
1 parent e1fbd09
commit cba07ad
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/addons/knobs/src/components/__tests__/Array.js b/addons/knobs/src/components/__tests__/Array.js
@@ -15,4 +15,17 @@ describe('Array', () => {
     wrapper.simulate('change', { target: { value: 'Fhishing,Skiing,Dancing' } });
     expect(onChange).toHaveBeenCalledWith(['Fhishing', 'Skiing', 'Dancing']);
   });
+
+  it('should change to an empty array when emptied', () => {
+    const onChange = jest.fn();
+    const wrapper = shallow(
+      <Array
+        onChange={onChange}
+        knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
+      />
+    );
+
+    wrapper.simulate('change', { target: { value: '' } });
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
 });
diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js
@@ -16,6 +16,13 @@ const styles = {
   color: '#555',
 };
 
+function formatArray(value, separator) {
+  if (value === '') {
+    return [];
+  }
+  return value.split(separator);
+}
+
 class ArrayType extends React.Component {
   render() {
     const { knob, onChange } = this.props;
@@ -27,7 +34,7 @@ class ArrayType extends React.Component {
         }}
         style={styles}
         value={knob.value.join(knob.separator)}
-        onChange={e => onChange(e.target.value.split(knob.separator))}
+        onChange={e => onChange(formatArray(e.target.value, knob.separator))}
       />
     );
   }