Подсказка Material UI остается открытой после закрытия диалогового окна
мое предположение, что состояние диалога вызывает проблему, но я не смог понять это. Подсказка работает по назначению, пока не будет нажата кнопка IconButton. Диалоговое окно появляется, как и должно, но когда диалоговое окно выходит, всплывающая подсказка появляется как активный.
class DeleteDocument extends React.Component {
state = {
open: false,
};
onDeleteFile() {
try {
ensureJobIsUnlocked();
} catch (err) {
return;
}
const confirmedByUser = true;
if (confirmedByUser) {
this.props.onDeleteFile(this.props.selectedDocument.id);
this.setState({ open: false });
}
}
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
render() {
return (
<div>
<Tooltip id="tooltip-icon" title="Delete Document">
<div>
<IconButton
disabled={(this.props.selectedDocument == null)}
onClick={this.handleClickOpen}
>
<DeleteIcon />
</IconButton>
</div>
</Tooltip>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Delete Document'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
This will delete the currently active PDF/Component Design. Are you sure you want to do this?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.onDeleteFile.bind(this)} color="primary" autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
2 ответов
см. вопрос #9624:
это ожидаемое поведение. Это сделано из соображений доступности. У вас есть два варианта: отключить ответ всплывающей подсказки для событий фокусировки или отключить диалог восстановления фокуса.
1. Отключите ответ всплывающей подсказки для событий фокусировки (docs)
<Tooltip disableTriggerFocus={true} />
2. Отключить фокус восстановления диалогового окна поведение (docs)
<Dialog disableRestoreFocus={true} />
установить disableFocusListener={true} в соответствии с этим doc https://material-ui.com/api/tooltip/