[Issue] The popover would not disappear when wrapping disabled button

[light049]

Descriptions

The popover would not disappear as expected when wrapping a disabled button.

Workaround

As a reference to get expected results

[cheton]

@light049
Related to facebook/react#18753

Pointer Events should have been supported by modern browsers and React v16.4

• https://caniuse.com/?search=onpointerenter
• https://caniuse.com/?search=onpointerleave
• https://caniuse.com/?search=onpointermove
• https://reactjs.org/blog/2018/05/23/react-v-16-4.html#pointer-events

[cheton]

@light049 This issue will be resolved in PR #551

You can use the follwoing code as a temporary workaround while waiting for a hotfix release.

<Popover trigger="hover">
  <PopoverTrigger>
    {({ getPopoverTriggerProps }) => {
      const popoverTriggerProps = getPopoverTriggerProps();
      popoverTriggerProps.onPointerEnter = popoverTriggerProps.onMouseEnter;
      popoverTriggerProps.onPointerLeave = popoverTriggerProps.onMouseLeave;
      popoverTriggerProps.onPointerMove = popoverTriggerProps.onMouseMove;
      return ( 
        <Button disabled {...popoverTriggerProps}>Disabled Button</Button>
      );
    }}
  </PopoverTrigger>
  <PopoverContent>
    Popover
  </PopoverContent>
</Popover>

[light049]

@cheton Thanks for your example.
I meet another weird condition if I abstract the button component out to be another component.
The popover content would not localed at expected position.

const Btn = ({
  disabled,
  ...restProps
}) => {
  return ( 
    <Button disabled {...restProps}>Disabled Button</Button>
  );
};

const Example = () => {
  return (
    <Popover trigger="hover">
      <PopoverTrigger>
        {({ getPopoverTriggerProps }) => {
          const popoverTriggerProps = getPopoverTriggerProps();
          popoverTriggerProps.onPointerEnter = popoverTriggerProps.onMouseEnter;
          popoverTriggerProps.onPointerLeave = popoverTriggerProps.onMouseLeave;
          popoverTriggerProps.onPointerMove = popoverTriggerProps.onMouseMove;
          return ( 
            <Btn disabled {...popoverTriggerProps} />
          );
        }}
      </PopoverTrigger>
      <PopoverContent>
        Popover
      </PopoverContent>
    </Popover>  
  );
}

[cheton]

You have to wrap your component using forwardRef:

const Btn = forwardRef((
  {
    disabled,
    ...restProps
  },
  ref,
) => {
  return ( 
    <Button ref={ref} disabled {...restProps}>Disabled Button</Button>
  );
});

[atomiks]

FYI pointer events (in the nature of fixing this bug, not the support in general) don't work in Safari also so I wouldn't consider it a solution. It's a problem with React's delegation/synthetic system: https://twitter.com/atomiksdev/status/1510512851198242819

[cheton]

@atomiks @light049 This issue is related to facebook/react#11972

See https://github.com/chakra-ui/chakra-ui/blob/next/packages/tooltip/src/use-tooltip.ts

  /**
   * This allows for catching mouseleave events when the tooltip
   * trigger is disabled. There's currently a known issue in
   * React regarding the onMouseLeave polyfill.
   * @see https://github.com/facebook/react/issues/11972
   */
  useEventListener("mouseleave", closeWithDelay, () => ref.current)

The workaround is to listen to the native mouseleave event to mitigate the known issue.

[cheton]

Fixed in #561