fix(dialog): Release focus after style changes on close (#4069)

material-components · Nov 21, 2018 · e12997a · e12997a
1 parent 857977f
commit e12997a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -436,6 +436,9 @@ a focus trapping solution for your component code.**
 
 [focus-trap]: https://github.com/davidtheclark/focus-trap
 
+> NOTE: iOS platform doesn't seem to register currently focused element via `document.activeElement` which causes releasing
+> focus to last focused element fail.
+
 #### `createFocusTrapInstance()`
 
 ```js

diff --git a/packages/mdc-dialog/foundation.js b/packages/mdc-dialog/foundation.js
@@ -144,7 +144,6 @@ class MDCDialogFoundation extends MDCFoundation {
 
     this.isOpen_ = false;
     this.adapter_.notifyClosing(action);
-    this.adapter_.releaseFocus();
     this.adapter_.addClass(cssClasses.CLOSING);
     this.adapter_.removeClass(cssClasses.OPEN);
     this.adapter_.removeBodyClass(cssClasses.SCROLL_LOCK);
@@ -154,6 +153,7 @@ class MDCDialogFoundation extends MDCFoundation {
 
     clearTimeout(this.animationTimer_);
     this.animationTimer_ = setTimeout(() => {
+      this.adapter_.releaseFocus();
       this.handleAnimationTimerEnd_();
       this.adapter_.notifyClosed(action);
     }, numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);

diff --git a/test/unit/mdc-dialog/foundation.test.js b/test/unit/mdc-dialog/foundation.test.js
@@ -205,8 +205,15 @@ test('#close deactivates focus trapping on the dialog surface', () => {
 
   foundation.open();
   td.reset();
+
+  const clock = installClock();
   foundation.close();
 
+  // Wait till setTimeout callback is executed.
+  clock.runToFrame();
+  clock.tick(100);
+  clock.tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
+
   td.verify(mockAdapter.releaseFocus());
 });