@@ -257,61 +257,43 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
257257 return ;
258258 }
259259
260- const element = this . _elementRef . nativeElement ;
261260 // If were to attempt to focus immediately, then the content of the dialog would not yet be
262261 // ready in instances where change detection has to run first. To deal with this, we simply
263- // wait for the microtask queue to be empty when setting focus when autoFocus isn't set to
264- // dialog. If the element inside the dialog can't be focused, then the container is focused
265- // so the user can't tab into other elements behind it.
266- const autoFocus = this . _config . autoFocus ;
267- switch ( autoFocus ) {
268- case false :
269- case 'dialog' :
270- // Ensure that focus is on the dialog container. It's possible that a different
271- // component tried to move focus while the open animation was running. See:
272- // https://github.com/angular/components/issues/16215. Note that we only want to do this
273- // if the focus isn't inside the dialog already, because it's possible that the consumer
274- // turned off `autoFocus` in order to move focus themselves.
275- afterNextRender (
276- ( ) => {
262+ // wait until after the next render.
263+ afterNextRender (
264+ ( ) => {
265+ const element = this . _elementRef . nativeElement ;
266+ switch ( this . _config . autoFocus ) {
267+ case false :
268+ case 'dialog' :
269+ // Ensure that focus is on the dialog container. It's possible that a different
270+ // component tried to move focus while the open animation was running. See:
271+ // https://github.com/angular/components/issues/16215. Note that we only want to do this
272+ // if the focus isn't inside the dialog already, because it's possible that the consumer
273+ // turned off `autoFocus` in order to move focus themselves.
277274 if ( ! this . _containsFocus ( ) ) {
278275 element . focus ( ) ;
279276 }
280- } ,
281- { injector : this . _injector } ,
282- ) ;
283- break ;
284- case true :
285- case 'first-tabbable' :
286- afterNextRender (
287- ( ) => {
277+ break ;
278+ case true :
279+ case 'first-tabbable' :
288280 const focusedSuccessfully = this . _focusTrap ?. focusInitialElement ( ) ;
289281 // If we weren't able to find a focusable element in the dialog, then focus the dialog
290282 // container instead.
291283 if ( ! focusedSuccessfully ) {
292284 this . _focusDialogContainer ( ) ;
293285 }
294- } ,
295- { injector : this . _injector } ,
296- ) ;
297- break ;
298- case 'first-heading' :
299- afterNextRender (
300- ( ) => {
286+ break ;
287+ case 'first-heading' :
301288 this . _focusByCssSelector ( 'h1, h2, h3, h4, h5, h6, [role="heading"]' ) ;
302- } ,
303- { injector : this . _injector } ,
304- ) ;
305- break ;
306- default :
307- afterNextRender (
308- ( ) => {
309- this . _focusByCssSelector ( autoFocus ! ) ;
310- } ,
311- { injector : this . _injector } ,
312- ) ;
313- break ;
314- }
289+ break ;
290+ default :
291+ this . _focusByCssSelector ( this . _config . autoFocus ! ) ;
292+ break ;
293+ }
294+ } ,
295+ { injector : this . _injector } ,
296+ ) ;
315297 }
316298
317299 /** Restores focus to the element that was focused before the dialog opened. */
0 commit comments