fixup! fix(cdk-experimental/ui-patterns) toolbar fix for focus change

Author: wagnermaciel

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

@@ -48,10 +48,14 @@ export class ListFocus<T extends ListFocusItem> {
   prevActiveItem = signal<T | undefined>(undefined);
 
   /** The index of the last item that was active. */
-  prevActiveIndex = computed(() => this.prevActiveItem()?.index() ?? -1);
+  prevActiveIndex = computed(() => {
+    return this.prevActiveItem() ? this.inputs.items().indexOf(this.prevActiveItem()!) : -1;
+  });
 
   /** The current active index in the list. */
-  activeIndex = computed(() => this.inputs.activeItem()?.index() ?? -1);
+  activeIndex = computed(() => {
+    return this.inputs.activeItem() ? this.inputs.items().indexOf(this.inputs.activeItem()!) : -1;
+  });
 
   constructor(readonly inputs: ListFocusInputs<T>) {}
 

src/cdk-experimental/ui-patterns/radio-group/radio-group.ts

@@ -43,7 +43,7 @@ interface ToolbarLike<V> {
 /** Controls the state of a radio group. */
 export class RadioGroupPattern<V> {
   /** The list behavior for the radio group. */
-  readonly listBehavior: List<RadioButtonPattern<V>, V>;
+  readonly listBehavior: List<RadioButtonPattern<V> | ToolbarWidget, V>;
 
   /** Whether the radio group is vertically or horizontally oriented. */
   orientation: SignalLike<'vertical' | 'horizontal'>;
@@ -132,9 +132,10 @@ export class RadioGroupPattern<V> {
 
     this.listBehavior = new List({
       ...inputs,
-      wrap: () => false,
+      activeItem: inputs.toolbar()?.listBehavior.inputs.activeItem ?? inputs.activeItem,
+      wrap: () => !!inputs.toolbar(),
       multi: () => false,
-      selectionMode: () => 'follow',
+      selectionMode: () => (inputs.toolbar() ? 'explicit' : 'follow'),
       typeaheadDelay: () => 0, // Radio groups do not support typeahead.
     });
   }

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

@@ -68,23 +68,18 @@ export class ToolbarPattern<V> {
       .on(' ', () => this.toolbarSelectOverride())
       .on('Enter', () => this.toolbarSelectOverride())
       .on(this.prevKey, () => this.listBehavior.prev())
-      .on(this.nextKey, () => {
-        console.log('next');
-        this.next();
+      .on('ArrowDown', () => {
+        const activeItem = this.inputs.activeItem();
+        if (activeItem instanceof RadioButtonPattern && activeItem.group()!!) {
+          activeItem.group()?.listBehavior.next();
+        } else {
+          this.listBehavior.next();
+        }
       })
+      .on('ArrowRight', () => this.listBehavior.next())
       .on('Home', () => this.listBehavior.first())
       .on('End', () => this.listBehavior.last());
   });
-  next() {
-    const activeItem = this.inputs.activeItem();
-    // if (activeItem instanceof RadioButtonPattern && activeItem.group()!!) {
-    //   console.log('let the group move itself');
-    //   activeItem.group()!!.listBehavior.next();
-    // } else
-    this.listBehavior.next();
-    // find what is the next item
-    // console.log('next item', this.listBehavior.nextItem());
-  }
 
   toolbarSelectOverride() {
     const activeItem = this.inputs.activeItem();