Skip to content

fix(dialog): capture previously focused element immediately - #3875

Merged
kara merged 2 commits into
angular:masterfrom
crisbeto:dialog-capture-focus-early
Apr 21, 2017
Merged

fix(dialog): capture previously focused element immediately#3875
kara merged 2 commits into
angular:masterfrom
crisbeto:dialog-capture-focus-early

Conversation

@crisbeto

Copy link
Copy Markdown
Member

Captures the previously-focused element immediately, instead of waiting until the animation is done. This fixes a regression from #3774, because if we wait for the animation to finish, the focus might have shifted, or the element could have been disabled.

@googlebotgooglebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 2, 2017
if (this._document) {
this._elementFocusedBeforeDialogWasOpened = this._document.activeElement as HTMLElement;
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any way to capture this in a unit test?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was tricky to write a test that fails when we expect it to since we trigger the change detection and animations manually.

Comment threadsrc/lib/dialog/dialog-container.ts Outdated

/**
* Saves a reference to the element that was focused before the dialog was opened.
* @private

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need @private JsDoc

Comment threadsrc/lib/dialog/dialog-container.ts Outdated
private _elementRef: ElementRef,
private _focusTrapFactory: FocusTrapFactory) {
private _focusTrapFactory: FocusTrapFactory,
@Optional() @Inject(DOCUMENT) private _document: any) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can add a type for this while working around Angular Universal's limitations by doing Document|Document

@crisbetocrisbetoApr 17, 2017

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doing Document|Document fails in AoT.

Error: Error encountered resolving symbol values statically. Expression form not supported (position 84:54 in the original .ts file), resolving symbol MdDialogContainer

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Chatted with Chuck and this is a known issue with the metadata extractor (angular/angular#15424). Until that's fixed, we can inject it as any without the private sugar and then manually assign it to the field with type Document.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@crisbeto
crisbetoforce-pushed the dialog-capture-focus-early branch from 0098279 to 0470d35CompareApril 17, 2017 13:33
@crisbeto

Copy link
Copy Markdown
MemberAuthor

Addressed the feedback @jelbourn.

@crisbeto
crisbetoforce-pushed the dialog-capture-focus-early branch 2 times, most recently from 3690447 to ebf8407CompareApril 17, 2017 16:43

@jelbournjelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbournjelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Apr 17, 2017
@karakara added pr: needs rebase and removed action: merge The PR is ready for merge by the caretaker labels Apr 18, 2017
@karakara assigned crisbeto and unassigned jelbournApr 18, 2017
@kara

kara commented Apr 18, 2017

Copy link
Copy Markdown
Contributor

@crisbeto Can you rebase?

Captures the previously-focused element immediately, instead of waiting until the animation is done. This fixes a regression from angular#3774, because if we wait for the animation to finish, the focus might have shifted, or the element could have been disabled.
@crisbeto
crisbetoforce-pushed the dialog-capture-focus-early branch from 231f23a to 43a16faCompareApril 19, 2017 16:37
@crisbetocrisbeto added action: merge The PR is ready for merge by the caretaker and removed pr: needs rebase labels Apr 19, 2017
@kara
kara merged commit 29968b8 into angular:masterApr 21, 2017
@angular-automatic-lock-bot

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-botangular-automatic-lock-botBot locked and limited conversation to collaborators Sep 6, 2019
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: mergeThe PR is ready for merge by the caretakercla: yesPR author has agreed to Google's Contributor License Agreement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@crisbeto@kara@jelbourn@googlebot