vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-9922] Custom Fields - Focus Management (#10187) 

* use zip to ensure both query changes and new items have been added

* query for the label directly rather than the associated one

there is only one label and the checkbox is wrapped in the label
This commit is contained in:
Nick Krantz 2024-07-22 12:42:31 -05:00 committed by GitHub
parent 730142f612
commit cf34f66156
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
View File

@ -16,7 +16,7 @@ import {
} from "@angular/core"; } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms"; import { FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { Subject, switchMap, take } from "rxjs"; import { Subject, zip } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module"; import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@ -173,16 +173,12 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
ngAfterViewInit(): void { ngAfterViewInit(): void {
// Focus on the new input field when it is added // Focus on the new input field when it is added
// This is done after the view is initialized to ensure the input is rendered // This is done after the view is initialized to ensure the input is rendered
this.focusOnNewInput$ zip(this.focusOnNewInput$, this.customFieldRows.changes)
.pipe( .pipe(takeUntilDestroyed(this.destroyed$))
takeUntilDestroyed(this.destroyed$),
// QueryList changes are emitted after the view is updated
switchMap(() => this.customFieldRows.changes.pipe(take(1))),
)
.subscribe(() => { .subscribe(() => {
const input = const mostRecentRow = this.customFieldRows.last.nativeElement;
this.customFieldRows.last.nativeElement.querySelector<HTMLInputElement>("input"); const input = mostRecentRow.querySelector<HTMLInputElement>("input");
const label = document.querySelector(`label[for="${input.id}"]`).textContent.trim(); const label = mostRecentRow.querySelector<HTMLLabelElement>("label").textContent.trim();
// Focus the input after the announcement element is added to the DOM, // Focus the input after the announcement element is added to the DOM,
// this should stop the announcement from being cut off by the "focus" event. // this should stop the announcement from being cut off by the "focus" event.