CODEWITHSUNDEEP
semantic-uisemantic-ui-react
Dennie de Lange
Dennie de Lange

Reputation: 2934

Show popup based on state

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.

Upvotes: 0

Views: 2803

Answers (2)

Pavan Jain
Pavan Jain

Reputation: 41

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'/>

Upvotes: 1

user2516837
user2516837

Reputation:

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

Upvotes: 0

Related Questions