0
0
Fork 0

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:
Yamagishi Kazutoshi 2017-05-23 20:10:41 +09:00 committed by Eugen Rochko
parent 7eb4abe20a
commit 860ffc0560
5 changed files with 36 additions and 14 deletions

View file

@ -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>
);