[WORK IN PROGRESS] fix(Reactions): Tried fixing reactions' popup bug in Safari

src/components/Reactions/DELETE_ME_PLEASE.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import {FaceSmile} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Link, Palette, Popup} from '@gravity-ui/uikit';
+
+import {block} from '../utils/cn';
+
+import {i18n} from './i18n';
+
+import './Reactions.scss';
+
+const b = block('reactions');
+
+export function PopupWithPalette() {
+    return usePopup('Просто Palette', <Palette options={[{value: 'a', content: 'A'}]}></Palette>);
+}
+
+export function PopupWithButton() {
+    return usePopup('Просто кнопка', <Button>Кнопка</Button>);
+}
+
+export function PopupWithLink() {
+    return usePopup('Просто кнопка', <Link href="">ссылка</Link>);
+}
+
+function usePopup(label: string, paletteContent: React.ReactNode) {
+    const [addReactionsElement, setAddReactionsElement] = React.useState<HTMLButtonElement | null>(
+        null,
+    );
+
+    const [palettePopupOpened, setPalettePopupOpened] = React.useState(false);
+
+    const onOpenPalettePopup = React.useCallback(() => setPalettePopupOpened(true), []);
+    const onClosePalettePopup = React.useCallback(() => setPalettePopupOpened(false), []);
+    const onTogglePalettePopup = React.useCallback(
+        () => (palettePopupOpened ? onClosePalettePopup() : onOpenPalettePopup()),
+        [onClosePalettePopup, onOpenPalettePopup, palettePopupOpened],
+    );
+
+    const onOpenedChanged = React.useCallback(
+        (opened: boolean) => {
+            if (!opened) {
+                onClosePalettePopup();
+            }
+        },
+        [onClosePalettePopup],
+    );
+
+    const addReactionButton = (
+        <Button
+            className={b('reaction-button')}
+            ref={setAddReactionsElement}
+            size="m"
+            aria-label={i18n('add-reaction')}
+            onClick={onTogglePalettePopup}
+            view="flat-secondary"
+        >
+            <Button.Icon>
+                <Icon data={FaceSmile} />
+            </Button.Icon>
+        </Button>
+    );
+
+    const addReactionPopup = (
+        <Popup
+            className={b('add-reaction-popover')}
+            anchorElement={addReactionsElement}
+            open={palettePopupOpened}
+            initialFocus={0}
+            modal={true}
+            onOpenChange={onOpenedChanged}
+        >
+            {paletteContent}
+        </Popup>
+    );
+
+    return (
+        <Flex alignItems="center">
+            {addReactionButton}
+            {addReactionPopup}
+        </Flex>
+    );
+}

src/components/Reactions/Reaction.tsx

@@ -49,18 +49,18 @@ export function Reaction(props: ReactionInnerProps) {
 
     const onClickCallback = React.useCallback(() => onClick?.(value), [onClick, value]);
 
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-    const {onMouseEnter, onMouseLeave} = useReactionsPopup(props.reaction, buttonRef);
+    const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
+    const {onMouseEnter, onMouseLeave} = useReactionsPopup(props.reaction, buttonElement);
     const {openedTooltip: currentHoveredReaction} = useReactionsContext();
 
     const button = (
         <Button
             className={b('reaction-button', {size})}
-            ref={buttonRef}
+            ref={setButtonElement}
             size={size}
             selected={selected}
             view="outlined"
-            extraProps={{value}}
+            value={value}
             pin="circle-circle"
             onClick={onClickCallback}
         >
@@ -80,7 +80,7 @@ export function Reaction(props: ReactionInnerProps) {
             {currentHoveredReaction && currentHoveredReaction.reaction.value === value ? (
                 <Popup
                     className={b('popup')}
-                    anchorRef={currentHoveredReaction.ref}
+                    anchorElement={buttonElement}
                     placement={popupDefaultPlacement}
                     open={currentHoveredReaction.open}
                     hasArrow

src/components/Reactions/Reactions.tsx

@@ -52,6 +52,7 @@ export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOM
      * @default 'end'
      */
     addButtonPlacement?: 'start' | 'end';
+
     /**
      * If present, when a user hovers over the reaction, a popover appears with renderTooltip(state) content.
      * Can be used to display users who used this reaction.
@@ -84,7 +85,10 @@ export function Reactions({
     renderTooltip,
     onToggle,
 }: ReactionsProps) {
-    const addReactionButtonRef = React.useRef<HTMLButtonElement>(null);
+    const [addReactionsElement, setAddReactionsElement] = React.useState<HTMLButtonElement | null>(
+        null,
+    );
+
     const [palettePopupOpened, setPalettePopupOpened] = React.useState(false);
 
     const onOpenPalettePopup = React.useCallback(() => setPalettePopupOpened(true), []);
@@ -94,6 +98,15 @@ export function Reactions({
         [onClosePalettePopup, onOpenPalettePopup, palettePopupOpened],
     );
 
+    const onOpenedChanged = React.useCallback(
+        (opened: boolean) => {
+            if (!opened) {
+                onClosePalettePopup();
+            }
+        },
+        [onClosePalettePopup],
+    );
+
     const [currentHoveredReaction, setCurrentHoveredReaction] = React.useState<
         ReactionsContextTooltipProps | undefined
     >(undefined);
@@ -144,9 +157,9 @@ export function Reactions({
     const addReactionButton = readOnly ? null : (
         <Button
             className={b('reaction-button')}
-            ref={addReactionButtonRef}
+            ref={setAddReactionsElement}
             size={size}
-            extraProps={{'aria-label': i18n('add-reaction')}}
+            aria-label={i18n('add-reaction')}
             onClick={onTogglePalettePopup}
             view="flat-secondary"
         >
@@ -158,13 +171,12 @@ export function Reactions({
 
     const addReactionPopup = readOnly ? null : (
         <Popup
-            anchorRef={addReactionButtonRef}
             className={b('add-reaction-popover')}
+            anchorElement={addReactionsElement}
             open={palettePopupOpened}
-            modal
             initialFocus={0}
-            onOutsideClick={onClosePalettePopup}
-            onEscapeKeyDown={onClosePalettePopup}
+            modal={true}
+            onOpenChange={onOpenedChanged}
         >
             {paletteContent}
         </Popup>

src/components/Reactions/__stories__/Reactions.stories.tsx

@@ -1,6 +1,7 @@
 import {Flex, Text} from '@gravity-ui/uikit';
 import {Meta, StoryFn} from '@storybook/react';
 
+import {PopupWithButton} from '../DELETE_ME_PLEASE';
 import {Reactions} from '../Reactions';
 import {useMockReactions} from '../__tests__/mock/mockHooks';
 
@@ -10,29 +11,50 @@ export default {
 } as Meta<typeof Reactions>;
 
 export const Default: StoryFn = () => {
-    return <Reactions {...useMockReactions()} />;
+    return (
+        <div>
+            <Flex
+                direction="column"
+                gap={4}
+                overflow="auto"
+                height="600px"
+                style={{border: '1px solid black'}}
+            >
+                <div>
+                    <div style={{height: '2000px'}}></div>
+                </div>
+                {/* <PopupWithPalette /> */}
+                <PopupWithButton />
+                {/* <PopupWithLink /> */}
+                {/* <Reactions {...useMockReactions()} /> */}
+            </Flex>
+        </div>
+    );
 };
 
 export const Readonly: StoryFn = () => {
     const {reactions, reactionsState, renderTooltip, onToggle} = useMockReactions();
 
     return (
-        <Reactions
-            reactions={reactions}
-            renderTooltip={
-                renderTooltip
-                    ? (state) => (
-                          <Flex direction="column" gap={2}>
-                              <Text variant="subheader-1">You must be singed in to react</Text>
-                              {renderTooltip(state)}
-                          </Flex>
-                      )
-                    : undefined
-            }
-            reactionsState={reactionsState}
-            onToggle={onToggle}
-            readOnly={true}
-        />
+        <Flex direction="column" gap={4} overflow="auto" height="600px">
+            <div style={{height: '2000px'}}></div>
+            <Reactions
+                reactions={reactions}
+                renderTooltip={
+                    renderTooltip
+                        ? (state) => (
+                              <Flex direction="column" gap={2}>
+                                  <Text variant="subheader-1">You must be singed in to react</Text>
+                                  {renderTooltip(state)}
+                              </Flex>
+                          )
+                        : undefined
+                }
+                reactionsState={reactionsState}
+                onToggle={onToggle}
+                readOnly={true}
+            />
+        </Flex>
     );
 };
 

src/components/Reactions/context.ts

@@ -4,7 +4,7 @@ import type {ReactionState} from './Reaction';
 
 export interface ReactionsContextTooltipProps {
     reaction: ReactionState;
-    ref: React.RefObject<HTMLButtonElement>;
+    element: HTMLButtonElement;
     open: boolean;
 }
 

src/components/Reactions/hooks.ts

@@ -9,10 +9,7 @@ const DELAY = {
     closeTimeout: 200,
 } as const;
 
-export function useReactionsPopup(
-    reaction: ReactionState,
-    ref: React.RefObject<HTMLButtonElement>,
-) {
+export function useReactionsPopup(reaction: ReactionState, element: HTMLButtonElement | null) {
     const {value} = reaction;
 
     const {openedTooltip: currentHoveredReaction, setOpenedTooltip: setCurrentHoveredReaction} =
@@ -22,8 +19,10 @@ export function useReactionsPopup(
     const {delayedCall: setDelayedClose, clearTimeoutRef: clearCloseTimeout} = useTimeoutRef();
 
     const open = React.useCallback(() => {
-        setCurrentHoveredReaction({reaction, open: true, ref});
-    }, [reaction, ref, setCurrentHoveredReaction]);
+        if (!element) return;
+
+        setCurrentHoveredReaction({reaction, open: true, element});
+    }, [reaction, element, setCurrentHoveredReaction]);
 
     const close = React.useCallback(() => {
         clearOpenTimeout();
@@ -43,7 +42,9 @@ export function useReactionsPopup(
                 setDelayedOpen(open, DELAY.openTimeout);
             }
         } else {
-            setCurrentHoveredReaction({reaction, open: false, ref});
+            if (!element) return;
+
+            setCurrentHoveredReaction({reaction, open: false, element});
 
             setDelayedOpen(open, DELAY.openTimeout);
         }
@@ -52,15 +53,17 @@ export function useReactionsPopup(
         currentHoveredReaction,
         open,
         reaction,
-        ref,
+        element,
         setCurrentHoveredReaction,
         setDelayedOpen,
     ]);
 
     const delayedOpenPopup = React.useCallback(() => {
+        if (!element) return;
+
         clearCloseTimeout();
         setDelayedOpen(focus, DELAY.focusTimeout);
-    }, [clearCloseTimeout, focus, setDelayedOpen]);
+    }, [clearCloseTimeout, element, focus, setDelayedOpen]);
 
     const delayedClosePopup = React.useCallback(() => {
         clearOpenTimeout();