Focus the submit button (#3253)
Focus the submit button when confirmation modal is opened. Also, changed cancellation link to button. This makes the meaning clearer.
This commit is contained in:
parent
7eb4abe20a
commit
860ffc0560
5 changed files with 36 additions and 14 deletions
|
@ -13,18 +13,25 @@ class ConfirmationModal extends React.PureComponent {
|
|||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.button.focus();
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.props.onClose();
|
||||
this.props.onConfirm();
|
||||
}
|
||||
|
||||
handleCancel = (e) => {
|
||||
e.preventDefault();
|
||||
handleCancel = () => {
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.button = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, message, confirm, onConfirm, onClose } = this.props;
|
||||
const { message, confirm } = this.props;
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal confirmation-modal'>
|
||||
|
@ -33,8 +40,10 @@ class ConfirmationModal extends React.PureComponent {
|
|||
</div>
|
||||
|
||||
<div className='confirmation-modal__action-bar'>
|
||||
<div><a href='#' onClick={this.handleCancel}><FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /></a></div>
|
||||
<Button text={confirm} onClick={this.handleClick} />
|
||||
<Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
|
||||
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
|
||||
</Button>
|
||||
<Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue