Stop modal from closing on outside click

Set the modal's backdrop to static. The modal component has a prop of backdrop, set that to backdrop="static"

<div>    <Modal show={this.state.show} onHide={this.handleClose} backdrop="static">        <Modal.Header>            <Modal.Title>Change Password</Modal.Title>        </Modal.Header>        <Modal.Body>            <form className="form-horizontal" style={{margin:0}}>                <div className='password-heading'>This is the first time you have logged in.</div>                <div className='password-heading'>Please set a new password for your account.</div>                <br/>                <label className="password">Password                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>                    <span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>                    <span className="password__strength" data-score={this.state.score}>                        <div className="strength_string">{this.state.strength}</div>                    </span>                </label>                <br/>                <label className="password">Confirm Password                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>                </label>            </form>            <br/>        </Modal.Body>        <Modal.Footer>            <Button onClick={this.submitPassword} disabled={this.state.isDisabled}>Submit</Button>        </Modal.Footer>    </Modal></div>

From the documentation:

Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked. react-bootstrap

Remove onHide from the Modal onHide={this.handleClose}