feat(VDataTable): Add shift key logic for multiple selection #11921
Conversation
There was a problem hiding this comment.
There are a few behaviors here that I feel are not standard when it comes to shift selecting.
-
Select last entry without holding shift. Then select first entry while holding shift. My expectation here is that it would select from last entry to first entry, but that is not the case.
-
Select first entry without holding shift. Then select last entry while holding shift. The entire page is select. Then while still holding shift, select a middle entry. Here I would expect that everything from middle entry to the last entry would be deselected, but the opposite happens where everything from first entry to middle entry is deselected.
| if (index < this.lastEntry) { | ||
| for (let i = index; i <= this.lastEntry; i++) { | ||
| const currentItem = this.selectableItems[i] | ||
| const key = getObjectValueByPath(currentItem, this.itemKey) | ||
| if (value) selection[key] = currentItem | ||
| else delete selection[key] | ||
| emit && this.$emit('item-selected', { currentItem, value }) | ||
| } | ||
| } else if (index > this.lastEntry) { | ||
| for (let i = this.lastEntry; i <= index; i++) { | ||
| const currentItem = this.selectableItems[i] | ||
| const key = getObjectValueByPath(currentItem, this.itemKey) | ||
| if (value) selection[key] = currentItem | ||
| else delete selection[key] | ||
| emit && this.$emit('item-selected', { currentItem, value }) | ||
| } |
There was a problem hiding this comment.
Try to refactor this into something more DRY. The only difference between the ifs is the for loop definition
Description
Add a listener for shift key press.
Add logic for selecting multiple check-boxes.
Motivation and Context
resolves #9958.
Types of changes
Checklist:
masterfor bug fixes and documentation updates,devfor new features and backwards compatible changes andnextfor non-backwards compatible changes).