Been trying to migrate from react-portal
from v2 to v4, due to recent upgrade of React
to 16.8.6.
Having problem with Portal
, whereby supposed to load a button on openByClickOn
(as shown below), but nothing appears. Is there any breaking changes on the usage of openByClickOn
?
<Portal ref={c => this.findDialog = c} closeOnEsc openByClickOn={<div className="header-button" style={{background: `#78808B no-repeat center right`}}>FIND TICKET</div>} style={{width: '480px'}}>
<DialogTitle style={{fontSize: '25px', color: 'black'}}>Find Ticket</DialogTitle>
<DialogContent>
<Field name="ticketNo" component={renderField} type="text" label="Ticket No." onKeyUp={() => this.setState({error: ''})}
style={{width: '100%'}}/>
{this.state.error && <p style={{color: '#d50000'}}>{this.state.error}</p>}
</DialogContent>
<DialogActions>
<Button type='button' onClick={handleSubmit(this.find.bind(this))} disabled={pristine || submitting}>Find</Button>
<Button type='button' onClick={() => this.close()}>Close</Button>
</DialogActions>
</Portal>
Expected Result: To show a div button which can be clicked to launch a Dialog box.
It is confirmed openByClickOn
is no longer supported in react-portal
v4.
Which it should be supported as it is useful. Especially when want to include a button together and to handle the opening of dialog when click.
Took quite an effort to change the code to overcome this. The HTML button needs to be first added at parent component to handle the event then.