diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index c76745f2ebfe..bca147bc29be 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/packages/react/src/components/Modal/Modal.js @@ -226,6 +226,7 @@ export default class Modal extends Component { }; button = React.createRef(); + secondaryButton = React.createRef(); outerModal = React.createRef(); innerModal = React.createRef(); startTrap = React.createRef(); @@ -234,13 +235,26 @@ export default class Modal extends Component { modalLabelId = `${prefix}--modal-header__label--${this.modalInstanceId}`; modalHeadingId = `${prefix}--modal-header__heading--${this.modalInstanceId}`; modalBodyId = `${prefix}--modal-body--${this.modalInstanceId}`; + modalCloseButtonClass = `${prefix}--modal-close`; + + isCloseButton = (element) => { + return ( + (!this.props.onSecondarySubmit && + element === this.secondaryButton.current) || + element.classList.contains(this.modalCloseButtonClass) + ); + }; handleKeyDown = (evt) => { if (this.props.open) { if (evt.which === 27) { this.props.onRequestClose(evt); } - if (evt.which === 13 && this.props.shouldSubmitOnEnter) { + if ( + evt.which === 13 && + this.props.shouldSubmitOnEnter && + !this.isCloseButton(evt.target) + ) { this.props.onRequestSubmit(evt); } } @@ -397,7 +411,7 @@ export default class Modal extends Component { const modalButton = ( ); @@ -449,7 +463,10 @@ export default class Modal extends Component { } if (secondaryButtonText) { return ( - );