Fix date separator trigger ref forwarding for jump-to-date menu (#33102)

* Fix date separator trigger ref forwarding for jump-to-date menu

* Normal forwarded ref is sufficient for the menu-button setup in Compound

* Better comment

Author: rbondesson

packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorButton.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { Heading, Tooltip } from "@vector-im/compound-web";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 
@@ -20,8 +20,6 @@ export interface DateSeparatorButtonProps {
     tooltipOpen?: boolean;
     /** Extra CSS classes to apply to the component. */
     className?: string;
-    /** Optional ref for the button container element. */
-    buttonRef?: React.Ref<HTMLDivElement>;
     /** Called when the pointer enters the button trigger. */
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     /** Called when the pointer leaves the button trigger. */
@@ -32,19 +30,17 @@ export interface DateSeparatorButtonProps {
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 
-/** Interactive date separator button that opens the jump-to-date menu. */
-export function DateSeparatorButton({
-    label,
-    tooltipOpen,
-    className,
-    buttonRef,
-    ...props
-}: DateSeparatorButtonProps): React.ReactNode {
+/** Interactive date separator button that forwards its ref to the underlying trigger element used by Compound Menu. */
+export const DateSeparatorButton = forwardRef<HTMLDivElement, DateSeparatorButtonProps>(function DateSeparatorButton(
+    { label, tooltipOpen, className, ...props },
+    forwardedRef,
+): React.ReactNode {
     const { translate: _t } = useI18n();
+
     return (
         <Tooltip description={_t("room|jump_to_date")} placement="right" open={tooltipOpen}>
             <Flex
-                ref={buttonRef}
+                ref={forwardedRef}
                 data-testid="jump-to-date-separator-button"
                 className={className}
                 aria-live="off"
@@ -60,4 +56,4 @@ export function DateSeparatorButton({
             </Flex>
         </Tooltip>
     );
-}
+});

packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx

@@ -7,12 +7,13 @@
 
 import { render, screen } from "@test-utils";
 import { composeStories } from "@storybook/react-vite";
-import React from "react";
+import React, { createRef } from "react";
 import { describe, it, expect } from "vitest";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { BaseViewModel } from "../../../core/viewmodel/BaseViewModel";
+import { DateSeparatorButton } from "./DateSeparatorButton";
 import { DateSeparatorView, type DateSeparatorViewModel, type DateSeparatorViewSnapshot } from "./DateSeparatorView";
 import * as stories from "./DateSeparatorView.stories";
 
@@ -73,4 +74,12 @@ describe("DateSeparatorView", () => {
         vm.setSnapshot({ label: "Yesterday" });
         await waitFor(() => expect(screen.getByText("Yesterday", { selector: "h2" })).toBeInTheDocument());
     });
+
+    it("forwards refs to the trigger element", () => {
+        const ref = createRef<HTMLDivElement>();
+
+        render(<DateSeparatorButton ref={ref} label="Today" />);
+
+        expect(ref.current).toBe(screen.getByTestId("jump-to-date-separator-button"));
+    });
 });