Fix for message action bar visibility getting out of sync with the real UI state (#33445)

* Make sure action bar is not visible when using up/down arrows during editing

* Add a temporary mouse move listener to handle tooltips stealing onMouseLeave events

* Better naming, add comments and test

* Fix test that performs its own hover/pointer movement before clicking.

* Fix playwright test that actually displayed a message time stamp when hover state was stale

* Fixes after merge

apps/web/test/unit-tests/components/structures/RoomView-test.tsx

@@ -955,7 +955,7 @@ describe("RoomView", () => {
             expect(searchResultTile).not.toBeNull();
 
             await userEvent.hover(searchResultTile!);
-            await userEvent.click(await findByLabelText("Edit"));
+            await userEvent.click(await findByLabelText("Edit"), { skipHover: true });
 
             await waitFor(() => {
                 expect(container.querySelector(".mx_RoomView_searchResultsPanel")).not.toBeInTheDocument();
@@ -1024,7 +1024,7 @@ describe("RoomView", () => {
             expect(searchResultTile).not.toBeNull();
 
             await userEvent.hover(searchResultTile!);
-            await userEvent.click(await findByLabelText("Edit"));
+            await userEvent.click(await findByLabelText("Edit"), { skipHover: true });
 
             await expect(prom).resolves.toEqual(expect.objectContaining({ room_id: room2.roomId }));
         });

apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -46,6 +46,7 @@ import PinningUtils from "../../../../../src/utils/PinningUtils";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
+import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import PlatformPeg from "../../../../../src/PlatformPeg";
 
@@ -159,6 +160,29 @@ describe("EventTile", () => {
         });
     }
 
+    function WrappedEventTiles(props: { events: MatrixEvent[]; editEvent?: MatrixEvent }) {
+        const roomContext = getRoomContext(room, {
+            timelineRenderingType: TimelineRenderingType.Room,
+        });
+
+        return (
+            <MatrixClientContext.Provider value={client}>
+                <ScopedRoomContextProvider {...roomContext}>
+                    {props.events.map((event) => (
+                        <EventTile
+                            key={event.getId()}
+                            mxEvent={event}
+                            replacingEventId={event.replacingEventId()}
+                            editState={
+                                props.editEvent?.getId() === event.getId() ? new EditorStateTransfer(event) : undefined
+                            }
+                        />
+                    ))}
+                </ScopedRoomContextProvider>
+            </MatrixClientContext.Provider>
+        );
+    }
+
     beforeEach(() => {
         jest.clearAllMocks();
 
@@ -389,7 +413,9 @@ describe("EventTile", () => {
 
             expect(container.querySelector(".mx_MessageTimestamp")).toBeNull();
 
-            fireEvent.focus(getTile(container));
+            act(() => {
+                getTile(container).focus();
+            });
 
             expect(container.querySelector(".mx_MessageTimestamp")).not.toBeNull();
         });
@@ -613,7 +639,9 @@ describe("EventTile", () => {
             });
             const { container } = getComponent();
 
-            fireEvent.focus(getTile(container));
+            act(() => {
+                getTile(container).focus();
+            });
 
             expect(container.querySelector(".mx_MessageActionBar")).not.toBeNull();
         });
@@ -627,10 +655,14 @@ describe("EventTile", () => {
             const { container } = getComponent();
             const tile = getTile(container);
 
-            fireEvent.focus(tile);
+            act(() => {
+                tile.focus();
+            });
             expect(container.querySelector(".mx_MessageActionBar")).not.toBeNull();
 
-            fireEvent.blur(tile);
+            act(() => {
+                tile.blur();
+            });
 
             expect(container.querySelector(".mx_MessageActionBar")).toBeNull();
         });
@@ -1366,6 +1398,48 @@ describe("EventTile", () => {
         });
     });
 
+    it("does not leave a stale message action bar when switching edited events", async () => {
+        const firstEvent = mkMessage({
+            room: room.roomId,
+            user: "@alice:example.org",
+            msg: "First message",
+            event: true,
+        });
+        const secondEvent = mkMessage({
+            room: room.roomId,
+            user: "@alice:example.org",
+            msg: "Second message",
+            event: true,
+        });
+        const events = [firstEvent, secondEvent];
+
+        const matches = jest.spyOn(HTMLElement.prototype, "matches").mockImplementation(function (
+            this: HTMLElement,
+            selector: string,
+        ) {
+            if (selector === ":focus-visible") {
+                return true;
+            }
+            return Element.prototype.matches.call(this, selector);
+        });
+
+        const { container, rerender } = render(<WrappedEventTiles events={events} editEvent={firstEvent} />);
+        const editingTile = container.querySelector(".mx_EventTile_isEditing");
+
+        expect(editingTile).not.toBeNull();
+        fireEvent.focusIn(editingTile!);
+        expect(container.querySelectorAll(".mx_MessageActionBar")).toHaveLength(0);
+
+        rerender(<WrappedEventTiles events={events} editEvent={secondEvent} />);
+
+        await waitFor(() => {
+            expect(container.querySelectorAll(".mx_EventTile_isEditing")).toHaveLength(1);
+            expect(container.querySelectorAll(".mx_MessageActionBar")).toHaveLength(0);
+        });
+
+        matches.mockRestore();
+    });
+
     it("should display the not encrypted status for an unencrypted event when the room becomes encrypted", async () => {
         jest.spyOn(client.getCrypto()!, "getEncryptionInfoForEvent").mockResolvedValue({
             shieldColour: EventShieldColour.NONE,