[Select] Improve the value comparison function (mui#13408)

* Support type–converting when comparing selected values in SelectInput

In this commit, we are changing the comparison strategy of the
SelectInput component to match values across different types, for
example 10 and "10".

Instead of using type–converting operators (== and !=) that would
generate linter offenses, we adopted a strategy to parse the values to
strings before comparing.

This commit addresses the issue mui#12047

* let's merge

Author: nicolasiensen

.size-limit.js

@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of all the material-ui modules.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '93.2 KB',
+    limit: '93.3 KB',
   },
   {
     name: 'The main docs bundle',

packages/material-ui/src/Select/Select.js

@@ -172,7 +172,10 @@ Select.propTypes = {
     PropTypes.string,
     PropTypes.number,
     PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])),
+    PropTypes.object,
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.object]),
+    ),
   ]),
   /**
    * The variant to use.

packages/material-ui/src/Select/SelectInput.js

@@ -7,6 +7,14 @@ import Menu from '../Menu/Menu';
 import { isFilled } from '../InputBase/utils';
 import { setRef } from '../utils/reactHelpers';
 
+function areEqualValues(a, b) {
+  if (typeof b === 'object' && b !== null) {
+    return a === b;
+  }
+
+  return String(a) === String(b);
+}
+
 /**
  * @ignore - internal component.
  */
@@ -225,12 +233,12 @@ class SelectInput extends React.Component {
           );
         }
 
-        selected = value.indexOf(child.props.value) !== -1;
+        selected = value.some(v => areEqualValues(v, child.props.value));
         if (selected && computeDisplay) {
           displayMultiple.push(child.props.children);
         }
       } else {
-        selected = value === child.props.value;
+        selected = areEqualValues(value, child.props.value);
         if (selected && computeDisplay) {
           displaySingle = child.props.children;
         }
@@ -446,7 +454,10 @@ SelectInput.propTypes = {
     PropTypes.string,
     PropTypes.number,
     PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])),
+    PropTypes.object,
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.object]),
+    ),
   ]).isRequired,
   /**
    * The variant to use.

packages/material-ui/src/Select/SelectInput.test.js

@@ -61,6 +61,39 @@ describe('<SelectInput />', () => {
     );
   });
 
+  describe('prop: value', () => {
+    it('should select the option based on the number value', () => {
+      const wrapper = shallow(<SelectInput {...defaultProps} value={20} />);
+      assert.deepEqual(wrapper.find(MenuItem).map(m => m.props().selected), [false, true, false]);
+    });
+
+    it('should select the option based on the string value', () => {
+      const wrapper = shallow(<SelectInput {...defaultProps} value="20" />);
+      assert.deepEqual(wrapper.find(MenuItem).map(m => m.props().selected), [false, true, false]);
+    });
+
+    it('should select only the option that matches the object', () => {
+      const obj1 = { id: 1 };
+      const obj2 = { id: 2 };
+
+      const wrapper = shallow(
+        <SelectInput {...defaultProps} value={obj1}>
+          <MenuItem key={1} value={obj1}>
+            1
+          </MenuItem>
+          <MenuItem key={2} value={obj2}>
+            2
+          </MenuItem>
+        </SelectInput>,
+      );
+
+      assert.deepEqual(wrapper.find(MenuItem).map(wrapper2 => wrapper2.props().selected), [
+        true,
+        false,
+      ]);
+    });
+  });
+
   describe('prop: readOnly', () => {
     it('should not trigger any event with readOnly', () => {
       const wrapper = shallow(<SelectInput {...defaultProps} readOnly />);
@@ -281,9 +314,7 @@ describe('<SelectInput />', () => {
       const wrapper = shallow(<SelectInput {...defaultProps} disabled tabIndex={0} />);
       assert.strictEqual(wrapper.find('[data-mui-test="SelectDisplay"]').props().tabIndex, 0);
     });
-  });
 
-  describe('prop: multiple', () => {
     it('should serialize multiple select value', () => {
       const wrapper = shallow(<SelectInput {...defaultProps} value={[10, 30]} multiple />);
       assert.strictEqual(wrapper.find('input').props().value, '10,30');
@@ -294,6 +325,45 @@ describe('<SelectInput />', () => {
       ]);
     });
 
+    describe('when the value matches an option but they are different types', () => {
+      it('should select the options based on the value', () => {
+        const wrapper = shallow(<SelectInput {...defaultProps} value={['10', '20']} multiple />);
+        assert.deepEqual(wrapper.find(MenuItem).map(wrapper2 => wrapper2.props().selected), [
+          true,
+          true,
+          false,
+        ]);
+      });
+    });
+
+    describe('when the value is an object', () => {
+      it('should select only the options that match', () => {
+        const obj1 = { id: 1 };
+        const obj2 = { id: 2 };
+        const obj3 = { id: 3 };
+
+        const wrapper = shallow(
+          <SelectInput {...defaultProps} value={[obj1, obj3]} multiple>
+            <MenuItem key={1} value={obj1}>
+              1
+            </MenuItem>
+            <MenuItem key={2} value={obj2}>
+              2
+            </MenuItem>
+            <MenuItem key={3} value={obj3}>
+              3
+            </MenuItem>
+          </SelectInput>,
+        );
+
+        assert.deepEqual(wrapper.find(MenuItem).map(wrapper2 => wrapper2.props().selected), [
+          true,
+          false,
+          true,
+        ]);
+      });
+    });
+
     it('should throw if non array', () => {
       assert.throw(() => {
         shallow(<SelectInput {...defaultProps} multiple />);

pages/api/select.md

@@ -35,7 +35,7 @@ import Select from '@material-ui/core/Select';
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |   | Control `select` open state. You can only use it when the `native` property is `false` (default). |
 | <span class="prop-name">renderValue</span> | <span class="prop-type">func</span> |   | Render the selected value. You can only use it when the `native` property is `false` (default).<br><br>**Signature:**<br>`function(value: any) => ReactElement`<br>*value:* The `value` provided to the component. |
 | <span class="prop-name">SelectDisplayProps</span> | <span class="prop-type">object</span> |   | Properties applied to the clickable div element. |
-| <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number&nbsp;&#124;<br>&nbsp;bool&nbsp;&#124;<br>&nbsp;arrayOf<br></span> |   | The input value. This property is required when the `native` property is `false` (default). |
+| <span class="prop-name">value</span> | <span class="prop-type">union:&nbsp;string, number, bool, object, arrayOf<br></span> |   | The input value. This property is required when the `native` property is `false` (default). |
 | <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'standard'&nbsp;&#124;<br>&nbsp;'outlined'&nbsp;&#124;<br>&nbsp;'filled'<br></span> |   | The variant to use. |
 
 Any other properties supplied will be spread to the root element ([Input](/api/input/)).