React Semantic UI - Modal without trigger?

Question

Is it possible to use a Modal without a trigger? I will open and close it via state. For example, I want to use onClick on an input field(with a file name) to open the modal with a file chooser and then edit the name of the choosen file in the input field. All this in a nested modal... Looks much simpler if I will have both modals in a parent component without the triggers, and I will display/hide them via open={true/false}

Thanks

score 13 · Accepted Answer · edited Sep 03 '21 at 11:43

Yes it is. Don't set the prop trigger (it is not required) and just provide the open value from state/props.

class container extends Component {
    state = {
        isParentOpen: false,
        isChildOpen: false
    }
    
    handleClick = () => {
        this.setState({
            isParentOpen: !this.state.isOpen
        });
    }
    
    handleFocus = () => {
        this.setState({
            isChildOpen: true
        });
    }
    
    render() {
        return (
          <div>
            <Modal
              open={this.state.isParentOpen}
              size="large"
            >
              ...
              <Input onFocus={this.handleFocus} />
            </Modal>
            <Modal
              open={this.state.isChildOpen}
              size="small"
            >
              ...
            </Modal>
            <Button onClick={this.handleClick} />
          </div>
        );
    }
}

(You can nest Modal if you want to)

But how can the modal be hidden again when the OK button is clicked? — Philipp Ludwig, Nov 11 '18 at 16:08
@PhilippLudwig this answer worked for me: https://stackoverflow.com/a/42366679/2036340 — tlauer, Dec 20 '18 at 17:28

score 1 · Answer 2 · answered Feb 09 '19 at 19:10

Pass a prop to the modal component and fire handleOpen according to the prop on ComponentDidMount. This will allow the modal to be closed.

class ModalContainer extends Component {
 componentDidMount() {
    const { startOpen } = this.props;

    if (startOpen) {
      this.handleOpen();
    }
  }

handleOpen = () => this.setState({ modalOpen: true });

handleClose = () => this.setState({ modalOpen: false });
render() {
  return (
     <Modal open={this.state.modalOpen} onClose={this.handleClose} />
  )
}

React Semantic UI - Modal without trigger?

2 Answers2