Popup won't open when inside disabled FormField

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!

[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..."
                />

[brianespinosa]

Closing as the suggestion to change the disabling of pointer events will resolve the issue if anyone wants to do override what is default in specific cases. I would not recommend adding a <span /> as this will in a number of ways break the CSS due to how SUI class names are built for specificity with specific markup and direct child selectors.

// This has to happen in actual CSS  or a CSS in JS solution because React does not support using !important in style props
// Shown as SCSS for brevity
.withPointerEvents {
  &.ui.button:disabled, 
  &.ui.buttons .disabled.button, 
  &.ui.disabled.active.button, 
  &.ui.disabled.button, 
  &.ui.disabled.button:hover {
    pointer-events: auto !important; // This has to be done in order to override the !important declaration in SUI CSS
}

// In JSX
<Popup 
  content='Add users to your feed' 
  trigger={
    <Button 
      className='withPointerEvents' 
      disabled 
      icon='add' 
    />
  } 
/>