Fix lost focus when modals open/close (#12437)
* Fix lost focus after modal closes Regression caused by the use of the wicg-inert polyfill * Fix regression introduced by wicg-inert * Catch errors to please CodeClimate
This commit is contained in:
		
					parent
					
						
							
								b532ead798
							
						
					
				
			
			
				commit
				
					
						35b142a7ad
					
				
			
		
					 1 changed files with 10 additions and 4 deletions
				
			
		|  | @ -56,15 +56,21 @@ export default class ModalRoot extends React.PureComponent { | ||||||
|     } else if (!nextProps.children) { |     } else if (!nextProps.children) { | ||||||
|       this.setState({ revealed: false }); |       this.setState({ revealed: false }); | ||||||
|     } |     } | ||||||
|     if (!nextProps.children && !!this.props.children) { |  | ||||||
|       this.activeElement.focus(); |  | ||||||
|       this.activeElement = null; |  | ||||||
|     } |  | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   componentDidUpdate (prevProps) { |   componentDidUpdate (prevProps) { | ||||||
|     if (!this.props.children && !!prevProps.children) { |     if (!this.props.children && !!prevProps.children) { | ||||||
|       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); |       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); | ||||||
|  | 
 | ||||||
|  |       // Because of the wicg-inert polyfill, the activeElement may not be
 | ||||||
|  |       // immediately selectable, we have to wait for observers to run, as
 | ||||||
|  |       // described in https://github.com/WICG/inert#performance-and-gotchas
 | ||||||
|  |       Promise.resolve().then(() => { | ||||||
|  |         this.activeElement.focus(); | ||||||
|  |         this.activeElement = null; | ||||||
|  |       }).catch((error) => { | ||||||
|  |         console.error(error); | ||||||
|  |       }); | ||||||
|     } |     } | ||||||
|     if (this.props.children) { |     if (this.props.children) { | ||||||
|       requestAnimationFrame(() => { |       requestAnimationFrame(() => { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue