[Select] Allow range selection using shift key

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

@@ -1048,4 +1048,90 @@ describe('<Select />', () => {
     fireEvent.click(container.querySelector('button[type=submit]'));
     expect(handleSubmit.callCount).to.equal(1);
   });
+
+  describe('range multiple selection using shift key', () => {
+    function ControlledWrapper({ onChange, initialValue = [] }) {
+      const [value, setValue] = React.useState(initialValue);
+
+      return (
+        <Select
+          open
+          multiple
+          value={value}
+          onChange={({ target }) => {
+            onChange(target.value);
+            setValue(target.value);
+          }}
+        >
+          <MenuItem value="france">France</MenuItem>
+          <MenuItem value="germany">Germany</MenuItem>
+          <MenuItem value="china">China</MenuItem>
+          <MenuItem value="israel">Israel</MenuItem>
+          <MenuItem value="italy">Italy</MenuItem>
+        </Select>
+      );
+    }
+
+    it('should select range of values', () => {
+      const handleChange = spy();
+      const { getAllByRole } = render(<ControlledWrapper onChange={handleChange} />);
+
+      fireEvent.click(getAllByRole('option')[0]);
+      fireEvent.click(getAllByRole('option')[3], { shiftKey: true });
+
+      expect(handleChange.args[1][0]).to.deep.equal(['france', 'germany', 'china', 'israel']);
+    });
+
+    it('should select range of values in reverse direction', () => {
+      const handleChange = spy();
+      const { getAllByRole } = render(<ControlledWrapper onChange={handleChange} />);
+
+      fireEvent.click(getAllByRole('option')[3]);
+      fireEvent.click(getAllByRole('option')[0], { shiftKey: true });
+
+      expect(handleChange.args[1][0]).to.deep.equal(['israel', 'france', 'germany', 'china']);
+    });
+
+    it('should select range of values and keep uniqueness', () => {
+      const handleChange = spy();
+      const { getAllByRole } = render(
+        <ControlledWrapper onChange={handleChange} initialValue={['germany']} />,
+      );
+
+      fireEvent.click(getAllByRole('option')[0]);
+      fireEvent.click(getAllByRole('option')[3], { shiftKey: true });
+
+      expect(handleChange.args[1][0]).to.deep.equal(['germany', 'france', 'china', 'israel']);
+    });
+
+    it('should deselect range of values', () => {
+      const handleChange = spy();
+      const { getAllByRole } = render(
+        <ControlledWrapper
+          onChange={handleChange}
+          initialValue={['france', 'germany', 'china', 'israel', 'italy']}
+        />,
+      );
+
+      fireEvent.click(getAllByRole('option')[1]);
+      fireEvent.click(getAllByRole('option')[3], { shiftKey: true });
+
+      expect(handleChange.args[1][0]).to.deep.equal(['france', 'italy']);
+    });
+
+    it('should deselect range of values in reverse direction', () => {
+      const handleChange = spy();
+      const { getAllByRole } = render(
+        <ControlledWrapper
+          onChange={handleChange}
+          initialValue={['france', 'germany', 'china', 'israel', 'italy']}
+        />,
+      );
+
+      fireEvent.click(getAllByRole('option')[3]);
+      fireEvent.click(getAllByRole('option')[1], { shiftKey: true });
+
+      expect(handleChange.args[1][0]).to.deep.equal(['france', 'italy']);
+    });
+  });
 });

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

@@ -67,6 +67,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   });
 
   const inputRef = React.useRef(null);
+  const lastSelectedItem = React.useRef(null);
   const [displayNode, setDisplayNode] = React.useState(null);
   const { current: isOpenControlled } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
@@ -169,10 +170,34 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     if (multiple) {
       newValue = Array.isArray(value) ? value.slice() : [];
       const itemIndex = value.indexOf(child.props.value);
-      if (itemIndex === -1) {
+      if (
+        event.shiftKey &&
+        lastSelectedItem.current &&
+        !areEqualValues(lastSelectedItem.current[1], child.props.value)
+      ) {
+        const optionValues = React.Children.map(children, (c) => c.props.value);
+        const startOptionIndex = optionValues.indexOf(lastSelectedItem.current[1]);
+        const endOptionIndex = optionValues.indexOf(child.props.value);
+
+        if (startOptionIndex > -1 && endOptionIndex > -1) {
+          const range =
+            endOptionIndex > startOptionIndex
+              ? optionValues.slice(startOptionIndex, endOptionIndex + 1)
+              : optionValues.slice(endOptionIndex, startOptionIndex + 1);
+
+          if (lastSelectedItem.current[0]) {
+            // In case of multiple value selection, make sure to set unique values in the `newValue`.
+            newValue.push(...range.filter((v) => !value.some((vv) => areEqualValues(v, vv))));
+          } else {
+            newValue = newValue.filter((v) => !range.some((vv) => areEqualValues(v, vv)));
+          }
+        }
+      } else if (itemIndex === -1) {
         newValue.push(child.props.value);
+        lastSelectedItem.current = [true, child.props.value];
       } else {
         newValue.splice(itemIndex, 1);
+        lastSelectedItem.current = [false, child.props.value];
       }
     } else {
       newValue = child.props.value;