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

Author: abhiomkar

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

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);

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());
 });