Skip to content

Commit 3e31a99

Browse files
wagnermacielthePunderWoman
wagnermaciel
authored and
thePunderWoman
committed
docs: fix menubar overlay bug
1 parent 040af1a commit 3e31a99

File tree

18 files changed

+114
-84
lines changed

18 files changed

+114
-84
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ngMenuBar>
1+
<div ngMenuBar (focusin)="onFocusIn()">
22
<div
33
ngMenuItem
44
#fileEl
@@ -11,7 +11,7 @@
1111
</div>
1212

1313
<ng-template
14-
[cdkConnectedOverlayOpen]="true"
14+
[cdkConnectedOverlayOpen]="rendered()"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
1717
cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
101101
</div>
102102

103103
<ng-template
104-
[cdkConnectedOverlayOpen]="true"
104+
[cdkConnectedOverlayOpen]="rendered()"
105105
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106106
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
107107
cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
163163
</div>
164164

165165
<ng-template
166-
[cdkConnectedOverlayOpen]="true"
166+
[cdkConnectedOverlayOpen]="rendered()"
167167
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168168
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
169169
cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
213213
</div>
214214

215215
<ng-template
216-
[cdkConnectedOverlayOpen]="true"
216+
[cdkConnectedOverlayOpen]="rendered()"
217217
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218218
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
219219
cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
314314
</div>
315315

316316
<ng-template
317-
[cdkConnectedOverlayOpen]="true"
317+
[cdkConnectedOverlayOpen]="rendered()"
318318
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319319
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
320320
cdkAttachPopoverAsChild

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
1+
import {Component, signal, viewChild} from '@angular/core';
22
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
33
import {OverlayModule} from '@angular/cdk/overlay';
44

@@ -9,7 +9,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
99
imports: [MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
1010
standalone: true,
1111
})
12-
export class App implements AfterViewInit {
12+
export class App {
1313
fileMenu = viewChild<Menu<string>>('fileMenu');
1414
shareMenu = viewChild<Menu<string>>('shareMenu');
1515
editMenu = viewChild<Menu<string>>('editMenu');
@@ -25,9 +25,7 @@ export class App implements AfterViewInit {
2525

2626
rendered = signal(false);
2727

28-
ngAfterViewInit() {
29-
setTimeout(() => {
30-
debugger;
31-
}, 500);
28+
onFocusIn() {
29+
this.rendered.set(true);
3230
}
3331
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ngMenuBar class="material-menubar">
1+
<div ngMenuBar class="material-menubar" (focusin)="onFocusIn()">
22
<div
33
ngMenuItem
44
#fileEl
@@ -11,7 +11,7 @@
1111
</div>
1212

1313
<ng-template
14-
[cdkConnectedOverlayOpen]="true"
14+
[cdkConnectedOverlayOpen]="rendered()"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
1717
cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
101101
</div>
102102

103103
<ng-template
104-
[cdkConnectedOverlayOpen]="true"
104+
[cdkConnectedOverlayOpen]="rendered()"
105105
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106106
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
107107
cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
163163
</div>
164164

165165
<ng-template
166-
[cdkConnectedOverlayOpen]="true"
166+
[cdkConnectedOverlayOpen]="rendered()"
167167
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168168
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
169169
cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
213213
</div>
214214

215215
<ng-template
216-
[cdkConnectedOverlayOpen]="true"
216+
[cdkConnectedOverlayOpen]="rendered()"
217217
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218218
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
219219
cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
314314
</div>
315315

316316
<ng-template
317-
[cdkConnectedOverlayOpen]="true"
317+
[cdkConnectedOverlayOpen]="rendered()"
318318
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319319
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
320320
cdkAttachPopoverAsChild

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, viewChild} from '@angular/core';
1+
import {Component, signal, viewChild} from '@angular/core';
22
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
33
import {OverlayModule} from '@angular/cdk/overlay';
44

@@ -22,4 +22,10 @@ export class App {
2222
sizeMenu = viewChild<Menu<string>>('sizeMenu');
2323
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
2424
alignMenu = viewChild<Menu<string>>('alignMenu');
25+
26+
rendered = signal(false);
27+
28+
onFocusIn() {
29+
this.rendered.set(true);
30+
}
2531
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ngMenuBar class="retro-menubar">
1+
<div ngMenuBar class="retro-menubar" (focusin)="onFocusIn()">
22
<div
33
ngMenuItem
44
#fileEl
@@ -11,7 +11,7 @@
1111
</div>
1212

1313
<ng-template
14-
[cdkConnectedOverlayOpen]="true"
14+
[cdkConnectedOverlayOpen]="rendered()"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
1717
cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
101101
</div>
102102

103103
<ng-template
104-
[cdkConnectedOverlayOpen]="true"
104+
[cdkConnectedOverlayOpen]="rendered()"
105105
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106106
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
107107
cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
163163
</div>
164164

165165
<ng-template
166-
[cdkConnectedOverlayOpen]="true"
166+
[cdkConnectedOverlayOpen]="rendered()"
167167
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168168
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
169169
cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
213213
</div>
214214

215215
<ng-template
216-
[cdkConnectedOverlayOpen]="true"
216+
[cdkConnectedOverlayOpen]="rendered()"
217217
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218218
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
219219
cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
314314
</div>
315315

316316
<ng-template
317-
[cdkConnectedOverlayOpen]="true"
317+
[cdkConnectedOverlayOpen]="rendered()"
318318
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319319
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
320320
cdkAttachPopoverAsChild

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, viewChild} from '@angular/core';
1+
import {Component, signal, viewChild} from '@angular/core';
22
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
33
import {OverlayModule} from '@angular/cdk/overlay';
44

@@ -22,4 +22,10 @@ export class App {
2222
sizeMenu = viewChild<Menu<string>>('sizeMenu');
2323
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
2424
alignMenu = viewChild<Menu<string>>('alignMenu');
25+
26+
rendered = signal(false);
27+
28+
onFocusIn() {
29+
this.rendered.set(true);
30+
}
2531
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ngMenuBar>
1+
<div ngMenuBar (focusin)="onFocusIn()">
22
<div
33
ngMenuItem
44
#fileEl
@@ -11,7 +11,7 @@
1111
</div>
1212

1313
<ng-template
14-
[cdkConnectedOverlayOpen]="true"
14+
[cdkConnectedOverlayOpen]="rendered()"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
1717
cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
101101
</div>
102102

103103
<ng-template
104-
[cdkConnectedOverlayOpen]="true"
104+
[cdkConnectedOverlayOpen]="rendered()"
105105
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106106
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
107107
cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
163163
</div>
164164

165165
<ng-template
166-
[cdkConnectedOverlayOpen]="true"
166+
[cdkConnectedOverlayOpen]="rendered()"
167167
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168168
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
169169
cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
213213
</div>
214214

215215
<ng-template
216-
[cdkConnectedOverlayOpen]="true"
216+
[cdkConnectedOverlayOpen]="rendered()"
217217
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218218
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
219219
cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
314314
</div>
315315

316316
<ng-template
317-
[cdkConnectedOverlayOpen]="true"
317+
[cdkConnectedOverlayOpen]="rendered()"
318318
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319319
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
320320
cdkAttachPopoverAsChild

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {AfterViewInit, Component, signal, viewChild} from '@angular/core';
1+
import {Component, signal, viewChild} from '@angular/core';
22
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
33
import {OverlayModule} from '@angular/cdk/overlay';
44

@@ -9,7 +9,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
99
imports: [MenuBar, Menu, MenuContent, MenuItem, OverlayModule],
1010
standalone: true,
1111
})
12-
export class App implements AfterViewInit {
12+
export class App {
1313
fileMenu = viewChild<Menu<string>>('fileMenu');
1414
shareMenu = viewChild<Menu<string>>('shareMenu');
1515
editMenu = viewChild<Menu<string>>('editMenu');
@@ -25,9 +25,7 @@ export class App implements AfterViewInit {
2525

2626
rendered = signal(false);
2727

28-
ngAfterViewInit() {
29-
setTimeout(() => {
30-
debugger;
31-
}, 500);
28+
onFocusIn() {
29+
this.rendered.set(true);
3230
}
3331
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ngMenuBar class="material-menubar">
1+
<div ngMenuBar class="material-menubar" (focusin)="onFocusIn()">
22
<div
33
ngMenuItem
44
#fileEl
@@ -11,7 +11,7 @@
1111
</div>
1212

1313
<ng-template
14-
[cdkConnectedOverlayOpen]="true"
14+
[cdkConnectedOverlayOpen]="rendered()"
1515
[cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
1616
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
1717
cdkAttachPopoverAsChild
@@ -101,7 +101,7 @@
101101
</div>
102102

103103
<ng-template
104-
[cdkConnectedOverlayOpen]="true"
104+
[cdkConnectedOverlayOpen]="rendered()"
105105
[cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
106106
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
107107
cdkAttachPopoverAsChild
@@ -163,7 +163,7 @@
163163
</div>
164164

165165
<ng-template
166-
[cdkConnectedOverlayOpen]="true"
166+
[cdkConnectedOverlayOpen]="rendered()"
167167
[cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
168168
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
169169
cdkAttachPopoverAsChild
@@ -213,7 +213,7 @@
213213
</div>
214214

215215
<ng-template
216-
[cdkConnectedOverlayOpen]="true"
216+
[cdkConnectedOverlayOpen]="rendered()"
217217
[cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
218218
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
219219
cdkAttachPopoverAsChild
@@ -314,7 +314,7 @@
314314
</div>
315315

316316
<ng-template
317-
[cdkConnectedOverlayOpen]="true"
317+
[cdkConnectedOverlayOpen]="rendered()"
318318
[cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
319319
[cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
320320
cdkAttachPopoverAsChild

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, viewChild} from '@angular/core';
1+
import {Component, signal, viewChild} from '@angular/core';
22
import {MenuBar, Menu, MenuContent, MenuItem} from '@angular/aria/menu';
33
import {OverlayModule} from '@angular/cdk/overlay';
44

@@ -22,4 +22,10 @@ export class App {
2222
sizeMenu = viewChild<Menu<string>>('sizeMenu');
2323
paragraphMenu = viewChild<Menu<string>>('paragraphMenu');
2424
alignMenu = viewChild<Menu<string>>('alignMenu');
25+
26+
rendered = signal(false);
27+
28+
onFocusIn() {
29+
this.rendered.set(true);
30+
}
2531
}

0 commit comments

Comments
 (0)