Add PiP move threshold (#10040)

src/components/structures/PictureInPictureDragger.tsx

@@ -70,6 +70,8 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
         () => this.animationCallback(),
         () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
     );
+    private startingPositionX = 0;
+    private startingPositionY = 0;
 
     private _moving = false;
     public get moving(): boolean {
@@ -192,11 +194,22 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
         event.stopPropagation();
 
         this.mouseHeld = true;
+        this.startingPositionX = event.clientX;
+        this.startingPositionY = event.clientY;
     };
 
     private onMoving = (event: MouseEvent): void => {
         if (!this.mouseHeld) return;
 
+        if (
+            Math.abs(this.startingPositionX - event.clientX) < 5 &&
+            Math.abs(this.startingPositionY - event.clientY) < 5
+        ) {
+            // User needs to move the widget by at least five pixels.
+            // Improves click detection when using a touchpad or with nervous hands.
+            return;
+        }
+
         event.preventDefault();
         event.stopPropagation();
 

test/components/structures/PictureInPictureDragger-test.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import { screen, render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
@@ -82,28 +82,39 @@ describe("PictureInPictureDragger", () => {
         });
     });
 
-    it("doesn't leak drag events to children as clicks", async () => {
+    describe("when rendering the dragger", () => {
-        const clickSpy = jest.fn();
+        let clickSpy: jest.Mocked<MouseEventHandler>;
-        render(
+        let target: HTMLElement;
-            <PictureInPictureDragger draggable={true}>
-                {[
-                    ({ onStartMoving }) => (
-                        <div onMouseDown={onStartMoving} onClick={clickSpy}>
-                            Hello
-                        </div>
-                    ),
-                ]}
-            </PictureInPictureDragger>,
-        );
-        const target = screen.getByText("Hello");
 
-        // A click without a drag motion should go through
+        beforeEach(() => {
-        await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { keys: "[/MouseLeft]" }]);
+            clickSpy = jest.fn();
-        expect(clickSpy).toHaveBeenCalled();
+            render(
+                <PictureInPictureDragger draggable={true}>
+                    {[
+                        ({ onStartMoving }) => (
+                            <div onMouseDown={onStartMoving} onClick={clickSpy}>
+                                Hello
+                            </div>
+                        ),
+                    ]}
+                </PictureInPictureDragger>,
+            );
+            target = screen.getByText("Hello");
+        });
 
-        // A drag motion should not trigger a click
+        it("and clicking without a drag motion, it should pass the click to children", async () => {
-        clickSpy.mockClear();
+            await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { keys: "[/MouseLeft]" }]);
-        await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { coords: { x: 60, y: 60 } }, "[/MouseLeft]"]);
+            expect(clickSpy).toHaveBeenCalled();
-        expect(clickSpy).not.toHaveBeenCalled();
+        });
+
+        it("and clicking with a drag motion above the threshold of 5px, it should not pass the click to children", async () => {
+            await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { coords: { x: 60, y: 2 } }, "[/MouseLeft]"]);
+            expect(clickSpy).not.toHaveBeenCalled();
+        });
+
+        it("and clickign with a drag motion below the threshold of 5px, it should pass the click to the children", async () => {
+            await userEvent.pointer([{ keys: "[MouseLeft>]", target }, { coords: { x: 4, y: 4 } }, "[/MouseLeft]"]);
+            expect(clickSpy).toHaveBeenCalled();
+        });
     });
 });