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

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {computed, signal} from '@angular/core';
+import {signal} from '@angular/core';
 import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
 import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
 
@@ -36,11 +36,11 @@ export interface ListSelectionInputs<T extends ListSelectionItem<V>, V> {
 
 /** Controls selection for a list of items. */
 export class ListSelection<T extends ListSelectionItem<V>, V> {
-  /** An item representing the boundary for range selection. */
-  anchorItem = signal<T | undefined>(undefined);
+  /** The start index to use for range selection. */
+  rangeStartIndex = signal<number>(0);
 
-  /** The index of the current anchor item. */
-  anchorIndex = computed(() => this.inputs.items().findIndex(i => i === this.anchorItem()));
+  /** The end index to use for range selection. */
+  rangeEndIndex = signal<number>(0);
 
   /** The navigation controller of the parent list. */
   navigation: ListNavigation<T>;
@@ -61,8 +61,9 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
       this.deselectAll();
     }
 
+    const index = this.inputs.items().findIndex(i => i === item);
     if (opts.anchor) {
-      this.dropAnchor();
+      this.beginRangeSelection(index);
     }
     this.inputs.value.update(values => values.concat(item.value()));
   }
@@ -95,10 +96,10 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
     }
 
     for (const item of this.inputs.items()) {
-      this.select(item);
+      this.select(item, {anchor: false});
     }
 
-    this.dropAnchor();
+    this.beginRangeSelection();
   }
 
   /** Deselects all items in the list. */
@@ -130,9 +131,11 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
    * Deselects all items that were previously within the
    * selected range that are now outside of the selected range
    */
-  selectFromAnchor() {
-    const itemsInRange = this._getItemsFromActive(this.anchorIndex());
-    const itemsOutOfRange = this._getItemsFromActive(this.navigation.prevActiveIndex());
+  selectRange() {
+    const itemsInRange = this._getItemsFromActive(this.rangeStartIndex());
+    const itemsOutOfRange = this._getItemsFromActive(this.rangeEndIndex()).filter(
+      i => !itemsInRange.includes(i),
+    );
 
     for (const item of itemsOutOfRange) {
       this.deselect(item);
@@ -141,11 +144,19 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
     for (const item of itemsInRange) {
       this.select(item, {anchor: false});
     }
+
+    if (itemsInRange.length) {
+      const item = itemsInRange.pop();
+      const index = this.inputs.items().findIndex(i => i === item);
+      this.rangeEndIndex.set(index);
+    }
   }
 
   /** Sets the anchor to the current active index. */
-  dropAnchor() {
-    this.anchorItem.set(this.inputs.navigation.activeItem());
+  beginRangeSelection(index: number = this.navigation.inputs.activeIndex()) {
+    this.rangeStartIndex.set(index);
+    this.rangeEndIndex.set(index);
+    console.log('range start:', index);
   }
 
   private _getItemsFromActive(index: number) {
@@ -160,6 +171,11 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
     for (let i = lower; i <= upper; i++) {
       items.push(this.inputs.items()[i]);
     }
+
+    if (this.inputs.navigation.inputs.activeIndex() < index) {
+      return items.reverse();
+    }
+
     return items;
   }
 }

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

@@ -25,7 +25,7 @@ interface SelectOptions {
   toggleOne?: boolean;
   selectOne?: boolean;
   toggleAll?: boolean;
-  selectFromAnchor?: boolean;
+  selectRange?: boolean;
 }
 
 /** Represents the required inputs for a listbox. */
@@ -135,41 +135,48 @@ 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.
+      // The following block implements range selection using a keyboard.
+      //
+      // Range selection is started by holding shift and navigating to the next item in a list.
+      //
+      // Wrapping is disabled during range selection since any decision on how to
+      // continue the range after wrapping would lead to an unintuitive user experience.
       manager
         .on(Modifier.Any, 'Shift', () => this.shiftAnchorIndex.set(this.inputs.activeIndex()))
         .on(Modifier.Shift, this.prevKey, () => {
           if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
-            this.selection.dropAnchor();
+            this.selection.beginRangeSelection();
           }
           this.wrap.set(false);
-          this.prev({selectFromAnchor: true});
+          this.prev({selectRange: true});
           this.wrap.set(true);
         })
         .on(Modifier.Shift, this.nextKey, () => {
           if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
-            this.selection.dropAnchor();
+            this.selection.beginRangeSelection();
           }
           this.wrap.set(false);
-          this.next({selectFromAnchor: true});
+          this.next({selectRange: true});
           this.wrap.set(true);
         });
 
       manager
-        .on(Modifier.Shift, 'Enter', () => this._updateSelection({selectFromAnchor: true}))
+        .on(Modifier.Shift, 'Enter', () => {
+          this._updateSelection({selectRange: true});
+          this.shiftAnchorIndex.set(this.selection.rangeStartIndex());
+        })
+        .on(Modifier.Shift, this.dynamicSpaceKey, () => {
+          this._updateSelection({selectRange: true});
+          this.shiftAnchorIndex.set(this.selection.rangeStartIndex());
+        })
         .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'Home', () => {
-          this.selection.dropAnchor(); // Make the current focused option the anchor.
-          this.first({selectFromAnchor: true});
+          this.selection.beginRangeSelection(); // Make the current focused option the anchor.
+          this.first({selectRange: true});
         })
         .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'End', () => {
-          this.selection.dropAnchor(); // Make the current focused option the anchor.
-          this.last({selectFromAnchor: true});
-        })
-        .on(Modifier.Shift, this.dynamicSpaceKey, () =>
-          this._updateSelection({selectFromAnchor: true}),
-        );
+          this.selection.beginRangeSelection(); // Make the current focused option the anchor.
+          this.last({selectRange: true});
+        });
     }
 
     if (!this.followFocus() && this.inputs.multi()) {
@@ -212,9 +219,9 @@ export class ListboxPattern<V> {
     if (this.multi()) {
       manager.on(Modifier.Shift, e => {
         if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
-          this.selection.dropAnchor();
+          this.selection.beginRangeSelection();
         }
-        this.goto(e, {selectFromAnchor: true});
+        this.goto(e, {selectRange: true});
       });
     }
 
@@ -330,8 +337,8 @@ export class ListboxPattern<V> {
     if (opts?.toggleAll) {
       this.selection.toggleAll();
     }
-    if (opts?.selectFromAnchor) {
-      this.selection.selectFromAnchor();
+    if (opts?.selectRange) {
+      this.selection.selectRange();
     }
   }
 

src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.css

@@ -6,7 +6,7 @@
 }
 
 .example-listbox {
-  gap: 8px;
+  gap: 4px;
   margin: 0;
   padding: 8px;
   max-height: 50vh;
@@ -16,6 +16,7 @@
   list-style: none;
   flex-direction: column;
   overflow: scroll;
+  user-select: none;
 }
 
 .example-listbox[aria-orientation='horizontal'] {