react-portal

openByClickOn Button Not Appearing In react-portal v4


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.


Solution

  • 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.