Skip to content

Commit 2910322

Browse files
wagnermacielwagnermaciel
committed
main - 7872523 fix(multiple): expose element (#32328)
1 parent cd5be20 commit 2910322

File tree

7 files changed

+21
-28
lines changed

7 files changed

+21
-28
lines changed

‎docs-content/examples-highlighted/aria/combobox/combobox-dialog/combobox-dialog-example-ts.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,13 @@
8080
<span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
8181

8282
<span class="hljs-keyword">const</span> comboboxRect = combobox.<span class="hljs-title function_">inputElement</span>()?.<span class="hljs-title function_">getBoundingClientRect</span>();
83-
<span class="hljs-keyword">const</span> dialogEl = dialog.<span class="hljs-property">element</span>.<span class="hljs-property">nativeElement</span>;
8483

8584
<span class="hljs-keyword">const</span> scrollY = <span class="hljs-variable language_">window</span>.<span class="hljs-property">scrollY</span>;
8685

8786
<span class="hljs-keyword">if</span> (comboboxRect) {
88-
dialogEl.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.width}</span>px`</span>;
89-
dialogEl.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.bottom + scrollY + <span class="hljs-number">4</span>}</span>px`</span>;
90-
dialogEl.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.left - <span class="hljs-number">1</span>}</span>px`</span>;
87+
dialog.<span class="hljs-property">element</span>.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.width}</span>px`</span>;
88+
dialog.<span class="hljs-property">element</span>.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.bottom + scrollY + <span class="hljs-number">4</span>}</span>px`</span>;
89+
dialog.<span class="hljs-property">element</span>.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.left - <span class="hljs-number">1</span>}</span>px`</span>;
9190
}
9291
}
9392
}

‎docs-content/examples-highlighted/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example-ts.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@
5353
<span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
5454
combobox.<span class="hljs-property">_pattern</span>.<span class="hljs-title function_">expanded</span>() ? <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">showPopover</span>() : popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">hidePopover</span>();
5555

56-
<span class="hljs-comment">// TODO(wagnermaciel): Make this easier for developers to do.</span>
57-
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-property">_pattern</span>.<span class="hljs-property">inputs</span>.<span class="hljs-title function_">activeItem</span>()?.<span class="hljs-title function_">element</span>()?.<span class="hljs-title function_">scrollIntoView</span>({<span class="hljs-attr">block</span>: <span class="hljs-string">&#x27;nearest&#x27;</span>});
56+
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-title function_">scrollActiveItemIntoView</span>();
5857
});
5958
}
6059

‎docs-content/examples-source/aria/combobox/combobox-dialog/combobox-dialog-example.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,13 @@ export class ComboboxDialogExample {
8080
const combobox = this.combobox()!;
8181

8282
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
83-
const dialogEl = dialog.element.nativeElement;
8483

8584
const scrollY = window.scrollY;
8685

8786
if (comboboxRect) {
88-
dialogEl.style.width = `${comboboxRect.width}px`;
89-
dialogEl.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
90-
dialogEl.style.left = `${comboboxRect.left - 1}px`;
87+
dialog.element.style.width = `${comboboxRect.width}px`;
88+
dialog.element.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
89+
dialog.element.style.left = `${comboboxRect.left - 1}px`;
9190
}
9291
}
9392
}

‎docs-content/examples-source/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@ export class ComboboxReadonlyMultiselectExample {
5353
const combobox = this.combobox()!;
5454
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
5555

56-
// TODO(wagnermaciel): Make this easier for developers to do.
57-
this.listbox()?._pattern.inputs.activeItem()?.element()?.scrollIntoView({block: 'nearest'});
56+
this.listbox()?.scrollActiveItemIntoView();
5857
});
5958
}
6059

‎fesm2022/aria-combobox.mjs‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,11 @@ class ComboboxDialogExample {
4848
const dialog = this.dialog();
4949
const combobox = this.combobox();
5050
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
51-
const dialogEl = dialog.element.nativeElement;
5251
const scrollY = window.scrollY;
5352
if (comboboxRect) {
54-
dialogEl.style.width = `${comboboxRect.width}px`;
55-
dialogEl.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
56-
dialogEl.style.left = `${comboboxRect.left - 1}px`;
53+
dialog.element.style.width = `${comboboxRect.width}px`;
54+
dialog.element.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
55+
dialog.element.style.left = `${comboboxRect.left - 1}px`;
5756
}
5857
}
5958
static ɵfac = i0.ɵɵngDeclareFactory({
@@ -813,9 +812,7 @@ class ComboboxReadonlyMultiselectExample {
813812
const popover = this.popover();
814813
const combobox = this.combobox();
815814
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
816-
this.listbox()?._pattern.inputs.activeItem()?.element()?.scrollIntoView({
817-
block: 'nearest'
818-
});
815+
this.listbox()?.scrollActiveItemIntoView();
819816
});
820817
}
821818
showPopover() {

‎fesm2022/aria-combobox.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular/components-examples",
3-
"version": "21.1.0-next.0+sha-1629175",
3+
"version": "21.1.0-next.0+sha-7872523",
44
"description": "Angular Components Examples",
55
"private": true,
66
"repository": {
@@ -283,15 +283,15 @@
283283
},
284284
"homepage": "https://github.com/angular/components#readme",
285285
"peerDependencies": {
286-
"@angular/aria": "21.1.0-next.0+sha-1629175",
287-
"@angular/cdk": "21.1.0-next.0+sha-1629175",
288-
"@angular/cdk-experimental": "21.1.0-next.0+sha-1629175",
286+
"@angular/aria": "21.1.0-next.0+sha-7872523",
287+
"@angular/cdk": "21.1.0-next.0+sha-7872523",
288+
"@angular/cdk-experimental": "21.1.0-next.0+sha-7872523",
289289
"@angular/core": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
290290
"@angular/common": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
291-
"@angular/material": "21.1.0-next.0+sha-1629175",
292-
"@angular/material-experimental": "21.1.0-next.0+sha-1629175",
293-
"@angular/material-luxon-adapter": "21.1.0-next.0+sha-1629175",
294-
"@angular/material-date-fns-adapter": "21.1.0-next.0+sha-1629175"
291+
"@angular/material": "21.1.0-next.0+sha-7872523",
292+
"@angular/material-experimental": "21.1.0-next.0+sha-7872523",
293+
"@angular/material-luxon-adapter": "21.1.0-next.0+sha-7872523",
294+
"@angular/material-date-fns-adapter": "21.1.0-next.0+sha-7872523"
295295
},
296296
"devDependencies": {
297297
"@angular/aria": "workspace:*",

0 commit comments

Comments
 (0)