[Glitch] Fix lost focus when modals open/close

Port 35b142a7ad to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2019-11-30 18:19:47 +01:00 committed by Thibaut Girka
parent 99f1f48741
commit 2f8c4c588b
1 changed files with 11 additions and 4 deletions

View File

@ -62,15 +62,22 @@ 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({ preventScroll: true });
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({ preventScroll: true });
this.activeElement = null;
}).catch((error) => {
console.error(error);
});
this.handleModalClose(); this.handleModalClose();
} }
if (this.props.children) { if (this.props.children) {