fix(cdk-experimental/listbox): change shift+nav behavior

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/event-manager/event-manager.ts

@@ -47,6 +47,7 @@ export enum ModifierKey {
   Shift = 0b10,
   Alt = 0b100,
   Meta = 0b1000,
+  Any = 0b10000,
 }
 
 export type ModifierInputs = ModifierKey | ModifierKey[];
@@ -99,5 +100,10 @@ export function getModifiers(event: EventWithModifiers): number {
 export function hasModifiers(event: EventWithModifiers, modifiers: ModifierInputs): boolean {
   const eventModifiers = getModifiers(event);
   const modifiersList = Array.isArray(modifiers) ? modifiers : [modifiers];
+
+  if (modifiersList.includes(ModifierKey.Any)) {
+    return true;
+  }
+
   return modifiersList.some(modifiers => eventModifiers === modifiers);
 }

src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts

@@ -24,6 +24,7 @@ const home = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 36, 'Home',
 const end = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 35, 'End', mods);
 const space = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 32, ' ', mods);
 const enter = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 13, 'Enter', mods);
+const shift = () => createKeyboardEvent('keydown', 16, 'Shift', {shift: true});
 
 describe('Listbox Pattern', () => {
   function getListbox(inputs: Partial<TestInputs> & Pick<TestInputs, 'items'>) {
@@ -279,18 +280,25 @@ describe('Listbox Pattern', () => {
         expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowDown', () => {
+      it('should select a range of options on Shift + ArrowDown/ArrowUp', () => {
+        listbox.onKeydown(shift());
         listbox.onKeydown(down({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
         listbox.onKeydown(down({shift: true}));
-        expect(listbox.inputs.value()).toEqual(['Apricot', 'Banana']);
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowUp', () => {
-        listbox.onKeydown(down());
-        listbox.onKeydown(down());
+      it('should not allow wrapping while Shift is held down', () => {
+        listbox.onKeydown(shift());
+        listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
-        expect(listbox.inputs.value()).toEqual(['Apricot', 'Apple']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
       it('should select contiguous items from the most recently selected item to the focused item on Shift + Space (or Enter)', () => {
@@ -385,18 +393,25 @@ describe('Listbox Pattern', () => {
         expect(listbox.inputs.value()).toEqual(['Apple', 'Banana']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowDown', () => {
+      it('should select a range of options on Shift + ArrowDown/ArrowUp', () => {
+        listbox.onKeydown(shift());
         listbox.onKeydown(down({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
         listbox.onKeydown(down({shift: true}));
         expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowUp', () => {
-        listbox.onKeydown(down());
-        listbox.onKeydown(down());
+      it('should not allow wrapping while Shift is held down', () => {
+        listbox.onKeydown(shift());
+        listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
-        expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
       it('should select contiguous items from the most recently selected item to the focused item on Shift + Space (or Enter)', () => {

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -14,7 +14,7 @@ import {ListSelection, ListSelectionInputs} from '../behaviors/list-selection/li
 import {ListTypeahead, ListTypeaheadInputs} from '../behaviors/list-typeahead/list-typeahead';
 import {ListNavigation, ListNavigationInputs} from '../behaviors/list-navigation/list-navigation';
 import {ListFocus, ListFocusInputs} from '../behaviors/list-focus/list-focus';
-import {computed} from '@angular/core';
+import {computed, signal} from '@angular/core';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 
 /** The selection operations that the listbox can perform. */
@@ -76,6 +76,9 @@ export class ListboxPattern<V> {
   /** Whether the listbox selection follows focus. */
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
 
+  /** Whether the listbox should wrap. Used to disable wrapping while range selecting. */
+  wrap = signal(true);
+
   /** The key used to navigate to the previous item in the list. */
   prevKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
@@ -98,6 +101,9 @@ export class ListboxPattern<V> {
   /** The regexp used to decide if a key should trigger typeahead. */
   typeaheadRegexp = /^.$/; // TODO: Ignore spaces?
 
+  /** The index where the shift key started to be held down. */
+  shiftAnchorIndex = signal(0);
+
   /** The keydown event manager for the listbox. */
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
@@ -130,10 +136,34 @@ export class ListboxPattern<V> {
     }
 
     if (this.inputs.multi()) {
+      // When the user holds down the shift key, they are selecting a range starting from the
+      // index where the shift key begins being held down. Note that this is very different from
+      // selecting from the current active or focused index.
+      manager
+        .on(Modifier.Any, 'Shift', () => this.shiftAnchorIndex.set(this.inputs.activeIndex()))
+        .on(Modifier.Shift, this.prevKey, () => {
+          if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
+            this.selection.select();
+          } else if (this.inputs.activeIndex() > this.shiftAnchorIndex()) {
+            this.selection.deselect();
+          }
+          this.wrap.set(false);
+          this.prev({select: true});
+          this.wrap.set(true);
+        })
+        .on(Modifier.Shift, this.nextKey, () => {
+          if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
+            this.selection.select();
+          } else if (this.inputs.activeIndex() < this.shiftAnchorIndex()) {
+            this.selection.deselect();
+          }
+          this.wrap.set(false);
+          this.next({select: true});
+          this.wrap.set(true);
+        });
+
       manager
         .on(Modifier.Shift, 'Enter', () => this._updateSelection({selectFromAnchor: true}))
-        .on(Modifier.Shift, this.prevKey, () => this.prev({toggle: true}))
-        .on(Modifier.Shift, this.nextKey, () => this.next({toggle: true}))
         .on([Modifier.Ctrl, Modifier.Meta], 'A', () => this._updateSelection({selectAll: true}))
         .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'Home', () =>
           this.first({selectFromActive: true}),
@@ -207,7 +237,10 @@ export class ListboxPattern<V> {
     this.orientation = inputs.orientation;
     this.multi = inputs.multi;
 
-    this.navigation = new ListNavigation(inputs);
+    this.navigation = new ListNavigation({
+      ...inputs,
+      wrap: computed(() => this.wrap() && this.inputs.wrap()),
+    });
     this.selection = new ListSelection({...inputs, navigation: this.navigation});
     this.typeahead = new ListTypeahead({...inputs, navigation: this.navigation});
     this.focusManager = new ListFocus({...inputs, navigation: this.navigation});