Merge pull request #7568 from elliotlarson/next

Fix select knob default selection when using array-values [key] => val[]

addons/knobs/src/components/__tests__/Select.js

@@ -24,6 +24,21 @@ describe('Select', () => {
       expect(green.text()).toEqual('Green');
       expect(green.prop('value')).toEqual('Green');
     });
+
+    it('should set the default value for array-values correctly', () => {
+      knob = {
+        name: 'Array values',
+        options: {
+          '100 x 100': [100, 100],
+          '200 x 200': [200, 200],
+        },
+        value: [200, 200],
+      };
+
+      const wrapper = shallow(<SelectType knob={knob} />);
+      const value = wrapper.prop('value');
+      expect(value).toEqual('200 x 200');
+    });
   });
 
   describe('Array values', () => {

addons/knobs/src/components/types/Select.tsx

@@ -34,7 +34,12 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
     ? options.reduce<Record<string, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
     : (options as Record<string, SelectTypeKnobValue>);
 
-  const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
+  const selectedKey = Object.keys(entries).find(k => {
+    if (Array.isArray(knob.value)) {
+      return JSON.stringify(entries[k]) === JSON.stringify(knob.value);
+    }
+    return entries[k] === knob.value;
+  });
 
   return (
     <Form.Select