docs: fix menubar overlay bug

adev/src/content/examples/aria/menubar/src/basic/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar>
+<div ngMenuBar (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/basic/app/app.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -9,7 +9,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
   imports: [MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
   standalone: true,
 })
-export class App implements AfterViewInit {
+export class App {
   fileMenu = viewChild<Menu<string>>('fileMenu');
   shareMenu = viewChild<Menu<string>>('shareMenu');
   editMenu = viewChild<Menu<string>>('editMenu');
@@ -25,9 +25,7 @@ export class App implements AfterViewInit {
 
   rendered = signal(false);
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      debugger;
-    }, 500);
+  onFocusIn() {
+    this.rendered.set(true);
   }
 }

adev/src/content/examples/aria/menubar/src/basic/material/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar class="material-menubar">
+<div ngMenuBar class="material-menubar" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/basic/material/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -22,4 +22,10 @@ export class App {
   sizeMenu = viewChild<Menu<string>>('sizeMenu');
   paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
   alignMenu = viewChild<Menu<string>>('alignMenu');
+
+  rendered = signal(false);
+
+  onFocusIn() {
+    this.rendered.set(true);
+  }
 }

adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar class="retro-menubar">
+<div ngMenuBar class="retro-menubar" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/basic/retro/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -22,4 +22,10 @@ export class App {
   sizeMenu = viewChild<Menu<string>>('sizeMenu');
   paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
   alignMenu = viewChild<Menu<string>>('alignMenu');
+
+  rendered = signal(false);
+
+  onFocusIn() {
+    this.rendered.set(true);
+  }
 }

adev/src/content/examples/aria/menubar/src/disabled/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar>
+<div ngMenuBar (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/disabled/app/app.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -9,7 +9,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
   imports: [MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
   standalone: true,
 })
-export class App implements AfterViewInit {
+export class App {
   fileMenu = viewChild<Menu<string>>('fileMenu');
   shareMenu = viewChild<Menu<string>>('shareMenu');
   editMenu = viewChild<Menu<string>>('editMenu');
@@ -25,9 +25,7 @@ export class App implements AfterViewInit {
 
   rendered = signal(false);
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      debugger;
-    }, 500);
+  onFocusIn() {
+    this.rendered.set(true);
   }
 }

adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar class="material-menubar">
+<div ngMenuBar class="material-menubar" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/disabled/material/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -22,4 +22,10 @@ export class App {
   sizeMenu = viewChild<Menu<string>>('sizeMenu');
   paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
   alignMenu = viewChild<Menu<string>>('alignMenu');
+
+  rendered = signal(false);
+
+  onFocusIn() {
+    this.rendered.set(true);
+  }
 }

adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar class="retro-menubar">
+<div ngMenuBar class="retro-menubar" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -22,4 +22,10 @@ export class App {
   sizeMenu = viewChild<Menu<string>>('sizeMenu');
   paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
   alignMenu = viewChild<Menu<string>>('alignMenu');
+
+  rendered = signal(false);
+
+  onFocusIn() {
+    this.rendered.set(true);
+  }
 }

adev/src/content/examples/aria/menubar/src/rtl/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar dir="rtl">
+<div ngMenuBar dir="rtl" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -223,7 +223,7 @@
         <div ngMenuItem #imageEl value="Image" [submenu]="imageMenu()">
           <span class="icon material-symbols-outlined">image</span>
           <span class="label">Image</span>
-          <span class="icon arrow material-symbols-outlined">arrow_right</span>
+          <span class="icon arrow material-symbols-outlined">arrow_left</span>
         </div>
 
         <ng-template
@@ -260,7 +260,7 @@
         <div ngMenuItem #chartEl value="Chart" [submenu]="chartMenu()">
           <span class="icon material-symbols-outlined">insert_chart</span>
           <span class="label">Chart</span>
-          <span class="icon arrow material-symbols-outlined">arrow_right</span>
+          <span class="icon arrow material-symbols-outlined">arrow_left</span>
         </div>
 
         <ng-template
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -324,7 +324,7 @@
         <div ngMenuItem #textEl #textItem="ngMenuItem" value="Text" [submenu]="textMenu()">
           <span class="icon material-symbols-outlined">format_bold</span>
           <span class="label">Text</span>
-          <span class="icon arrow material-symbols-outlined">arrow_right</span>
+          <span class="icon arrow material-symbols-outlined">arrow_left</span>
         </div>
 
         <ng-template
@@ -363,7 +363,7 @@
 
               <div ngMenuItem #sizeEl value="Size" [submenu]="sizeMenu()">
                 <span class="label">Size</span>
-                <span class="icon arrow material-symbols-outlined">arrow_right</span>
+                <span class="icon arrow material-symbols-outlined">arrow_left</span>
               </div>
 
               <ng-template
@@ -393,7 +393,7 @@
         <div ngMenuItem #paragraphEl value="Paragraph styles" [submenu]="paragraphMenu()">
           <span class="icon material-symbols-outlined">format_align_justify</span>
           <span class="label">Paragraph styles</span>
-          <span class="icon arrow material-symbols-outlined">arrow_right</span>
+          <span class="icon arrow material-symbols-outlined">arrow_left</span>
         </div>
 
         <ng-template
@@ -414,7 +414,7 @@
         <div ngMenuItem #alignEl [submenu]="alignMenu()" value="Align & indent">
           <span class="icon material-symbols-outlined">format_indent_increase</span>
           <span class="label">Align & indent</span>
-          <span class="icon arrow material-symbols-outlined">arrow_right</span>
+          <span class="icon arrow material-symbols-outlined">arrow_left</span>
         </div>
 
         <ng-template

adev/src/content/examples/aria/menubar/src/rtl/app/app.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {Dir} from '@angular/cdk/bidi';
@@ -10,7 +10,7 @@ import {Dir} from '@angular/cdk/bidi';
   imports: [Dir, MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
   standalone: true,
 })
-export class App implements AfterViewInit {
+export class App {
   fileMenu = viewChild<Menu<string>>('fileMenu');
   shareMenu = viewChild<Menu<string>>('shareMenu');
   editMenu = viewChild<Menu<string>>('editMenu');
@@ -26,9 +26,7 @@ export class App implements AfterViewInit {
 
   rendered = signal(false);
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      debugger;
-    }, 500);
+  onFocusIn() {
+    this.rendered.set(true);
   }
 }

adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar class="material-menubar" dir="rtl">
+<div ngMenuBar class="material-menubar" dir="rtl" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/rtl/material/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {Dir} from '@angular/cdk/bidi';
@@ -23,4 +23,10 @@ export class App {
   sizeMenu = viewChild<Menu<string>>('sizeMenu');
   paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
   alignMenu = viewChild<Menu<string>>('alignMenu');
+
+  rendered = signal(false);
+
+  onFocusIn() {
+    this.rendered.set(true);
+  }
 }

adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenuBar class="retro-menubar" dir="rtl">
+<div ngMenuBar class="retro-menubar" dir="rtl" (focusin)="onFocusIn()">
   <div
     ngMenuItem
     #fileEl
@@ -11,7 +11,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
   </div>
 
   <ng-template
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
     [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
     cdkAttachPopoverAsChild

adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {Dir} from '@angular/cdk/bidi';
@@ -23,4 +23,10 @@ export class App {
   sizeMenu = viewChild<Menu<string>>('sizeMenu');
   paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
   alignMenu = viewChild<Menu<string>>('alignMenu');
+
+  rendered = signal(false);
+
+  onFocusIn() {
+    this.rendered.set(true);
+  }
 }