Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Select] Allow range selection using shift key #21753

Closed
wants to merge 4 commits into from
Closed

[Select] Allow range selection using shift key #21753

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
33cbe6d
[Select] Allow multiple select using shift key
Jul 11, 2020
f7a104c
fix: Better ref semantic and a comment typo fix
Jul 11, 2020
8f9a71f
fix: handle deselect range of options
Jul 12, 2020
e5540dc
chore: add tests to shift multiple select/deselect of multiple options
Jul 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 23 additions & 1 deletion packages/material-ui/src/Select/SelectInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
});

const inputRef = React.useRef(null);
const lastSelectedItemValue = React.useRef(null);
const [displayNode, setDisplayNode] = React.useState(null);
const { current: isOpenControlled } = React.useRef(openProp != null);
const [menuMinWidthState, setMenuMinWidthState] = React.useState();
Expand Down Expand Up @@ -169,8 +170,29 @@ 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 &&
lastSelectedItemValue.current &&
lastSelectedItemValue.current !== child.props.value &&
value.indexOf(lastSelectedItemValue.current) > -1
) {
const optionValues = React.Children.map(children, (c) => c.props.value);
const startOptionIndex = optionValues.indexOf(lastSelectedItemValue.current);
const endOptionIndex = optionValues.indexOf(child.props.value);

if (startOptionIndex > -1 && endOptionIndex > -1) {
let range = [];
if (endOptionIndex > startOptionIndex) {
range = optionValues.slice(startOptionIndex, endOptionIndex + 1);
} else {
range = optionValues.slice(endOptionIndex, startOptionIndex + 1);
}
// Selected range could contain selected values so we filter them out if they exists.
newValue.push(...range.filter((v) => !value.some((vv) => areEqualValues(v, vv))));
}
} else if (itemIndex === -1) {
newValue.push(child.props.value);
lastSelectedItemValue.current = child.props.value;
} else {
newValue.splice(itemIndex, 1);
}
Expand Down