can i disable hover after click event

[Parthvsquare]

Is your feature request related to a problem? Please describe.
Sometimes a button needs to have a tooltip and a popover.

Describe the solution you'd like
I like to have a solution like ant design

  return (
    <Popover
      style={{ width: 500 }}
      content={hoverContent}
      title="Hover title"
      trigger="hover"
      open={hovered}
      onOpenChange={handleHoverChange}
    >
      <Popover
        content={
          <div>
            {clickContent}
            <a onClick={hide}>Close</a>
          </div>
        }
        title="Click title"
        trigger="click"
        open={clicked}
        onOpenChange={handleClickChange}
      >
        <Button>Hover and click / 悬停并单击</Button>
      </Popover>
    </Popover>
  );

Describe alternatives you've considered
I tried to make something like this but the hover overrides click function.

/* eslint-disable react/jsx-props-no-spreading */

import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
import './style.module.css';
import {
  FloatingPortal,
  safePolygon,
  useClick,
  useFloating,
  useHover,
  useInteractions,
} from '@floating-ui/react';

interface PopoverProps {
  children: ReactElement;
  content: ReactNode;
  trigger?: 'click' | 'hover';
}

function Popover({
  trigger,
  children,
  content: floatingElement,
}: PopoverProps): ReactElement {
  const [isOpen, setIsOpen] = useState(false);
  const [isClicked, setIsClicked] = useState(trigger === 'click');

  const { refs, floatingStyles, context } = useFloating({
    open: isOpen,
    onOpenChange: (open, event) => {
      setIsOpen(open);
      if (!open) {
        setIsClicked(trigger === 'click');
      }
    },
    // middleware: [offset(10), flip(), shift()],
  });

  const click = useClick(context, {
    enabled: trigger === 'click',
    ignoreMouse: trigger === 'hover',
    event: 'click',
    toggle: false,
  });

  const hover = useHover(context, {
    enabled: trigger === 'hover' && !isClicked,
  });
  console.log('===> ~ file: index.tsx:46 ~ isClicked:', isClicked);

  const { getReferenceProps, getFloatingProps } = useInteractions([
    trigger === 'click' ? click : hover,
  ]);

  return (
    <>
      <div ref={refs.setReference} {...getReferenceProps()}>
        {children}
      </div>
      {isOpen && (
        <FloatingPortal>
          <div
            ref={refs.setFloating}
            style={floatingStyles}
            {...getFloatingProps()}
          >
            {floatingElement}
          </div>
        </FloatingPortal>
      )}
    </>
  );
}

Popover.defaultProps = {
  trigger: 'click',
};

export default Popover;

[Parthvsquare]

more context: i want to disable hover after click event, so only click event's content won't be overlayed by hover content.

[cojoclaudiu]

@Parthvsquare did you solve this issue?

[atomiks]

Disabling useHover does not cause the floating element to unmount itself, it only prevents further events from having any effect. You need to find a way in the state to conditionally un-render the hover popover while the click one is open.

One way to do this is to make the click one the parent, and pass down its open state to the hover popover via context. Whenever the click one opens, the hover one can read its state and decide whether to render the floating element reading that state, e.g. isClickPopoverOpen via the context. In the current code provided, it only sets this state internally, so the other one can't read the state.

---

A simpler alternative is to use useDismiss referencePress: true option on the hover popover, without any context. This will close it upon press, but if they leave then re-enter it will show it again even if the click one is still open. If their placements are on opposite sides this usually works fine. But this is kind of another use case for #1440.

[RamazanIttiev]

@Parthvsquare Have u found any solution to this issue? I have the same one