Show popup based on state

Question

I use a Popup to show an error message on an input if validation fails.

<Popup
    trigger={InputComponent}
    open={state.error}
    content={errorMessage}
/>

This works fine, but the annoying part is that when I focus the element an empty popup appears. I can't disable this behaviour for as far as I know. I've tried adding on={null} and on="none", but all this does not work.

Any ideas? It would be nice to disable triggering the popup, but to allow it to be visible on state value only.

Maybe wrap it in a conditional statement? `{ state.error && }` — MEnf, Oct 10 '17 at 15:27
This does not work, a Popup should be rendered before showing, otherwise it does not know where to place the popup (I tried this). — Dennie de Lange, Oct 10 '17 at 15:37

score 1 · Answer 1 · answered Apr 03 '18 at 19:44

If anyone facing the same issue, the easiest fix would be to add a custom popup style to your popup tag and define opacity with the state as below.

const style = {
    opacity: this.state.isOpen ? "1" : "0"
}


<Popup style={style} trigger={<Button icon='add' />} content='Add users to your feed'/>

score 0 · Accepted Answer · answered Oct 11 '17 at 14:32

The usage is very similar to one of the cases mentioned in the docs: https://react.semantic-ui.com/modules/popup#popup-example-controlled

Make sure state.error returns bool type and not string bool and finally, check you are able to close it after the popup opens using onOpen handler as an added measure to make sure you are able to atleast control the component's state.

Finally, as a hack, you can add a {{display: "none"}} through Popup's style prop when this.state.error === true

An example usage from SUI docs of a Popup that automatically after 2.5 seconds:

import React from 'react'
import { Button, Grid, Header, Popup } from 'semantic-ui-react'

const timeoutLength = 2500

class PopupExampleControlled extends React.Component {
  state = { isOpen: false }

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

    this.timeout = setTimeout(() => {
      this.setState({ isOpen: false })
    }, timeoutLength)
  }

  handleClose = () => {
    this.setState({ isOpen: false })
    clearTimeout(this.timeout)
  }

  render() {
    return (
      <Grid>
        <Grid.Column width={8}>
          <Popup
            trigger={<Button content='Open controlled popup' />}
            content={`This message will self-destruct in ${timeoutLength / 1000} seconds!`}
            on='click'
            open={this.state.isOpen}
            onClose={this.handleClose}
            onOpen={this.handleOpen}
            position='top right'
          />
        </Grid.Column>
        <Grid.Column width={8}>
          <Header>State</Header>
          <pre>{JSON.stringify(this.state, null, 2)}</pre>
        </Grid.Column>
      </Grid>
    )
  }
}

export default PopupExampleControlled

Show popup based on state

2 Answers2