Semantic-ui-react: Popup won't open when inside disabled FormField

[cattermo]

My use case is that I use Popup component to display a small information text about fields inside a form.
Sometimes those fields are disabled (because the user is not allowed to change them at the moment). That does not mean the information is not valuable to the user. Please fix so that Popup always opens, even though field is disabled.

Field with info

Disabled field won't show info

Steps

1. Create info popup inside form field
2. Disable the field

Expected Result

Popup opens on mouse hover

Actual Result

Popup does not open on mouse hover (when form field is disabled.)

Version

0.66.0

Testcase

The code is very simple (rewrote code from the docs):

import React from 'react'
import { Button, Checkbox, Form, Popup, Icon } from 'semantic-ui-react'

const FormExampleForm = () => (
  <Form>
    <Form.Field disabled>
      <label>First Name <Popup trigger={<Icon name="question" circular size="small" inverted/>} content="Some info here" /> </label>
      <input placeholder='First Name' disabled/>
    </Form.Field>
    <Button type='submit'>Submit</Button>
  </Form>
)

export default FormExampleForm

Thank you for an amazing library!

[levithomason]

Disabled CSS rules in SUI usually are applied with pointer-events: none; to prevent user interaction.

.ui.form .disabled.field, .ui.form .disabled.fields .field, .ui.form .field :disabled {
    pointer-events: none;
    opacity: .45;
}

This prevents the browser from triggering any mouse enter/leave events in order to trigger the Popup. If you feel the CSS should be changed, you'll want to open an issue on https://github.com/Semantic-Org/Semantic-UI as SUIR only concerns itself with React components.

The workaround is to place the Popup in the tree so that its parent is not disabled.

[eric-burel]

Hi, I can't figure out a correct workaround when the popup is around a disabled Table.Row or an inner cell of such a disabled row. Since it is not a form component per se I would expect it to be hoverable even when disabled, or at least to be able to force this for the Popup. I'll try to inline css to force this behaviour.

[bthj]

The workaround is to place the Popup in the tree so that its parent is not disabled.

To achieve this I just wrapped the button in a <span>, like so:

                <Popup
                  trigger={
                    <span>
                      <Button icon='save' content='Save'
                        disabled={true}
                      />
                    </span>
                  }
                  content="popup text..."
                />

[quanganhtran]

To follow up on this, wrapping with span would still require a lot of customization to have it functional for me. The above screenshot is for the minimal wrap

EDIT: I realized this maybe more of CSS issue than React components, as already discussed above

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

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

  handleOpen = () => {
    this.setState(s => ({
      isOpen: !s.isOpen,
    }))
  }

  render() {
    return (
      <>
        <Popup
          open={this.state.isOpen}
          trigger={<Button content='Button' onClick={this.handleOpen} />}
          content='Add'
        />
        <Popup
          open={this.state.isOpen}
          trigger={
            <span>
              <Button content='Button' disabled />
            </span>
          }
          content='Add'
        />
        <Popup
          open={this.state.isOpen}
          trigger={<Button content='Button' floated='right' />}
          content='Add'
        />
        <Popup
          open={this.state.isOpen}
          trigger={
            <span>
              <Button content='Button' disabled floated='right' />
            </span>
          }
          content='Add'
        />
      </>
    )
  }
}

export default PopupExampleControlled