[Recorder] Use onPointer instead of onMouse for consistent touch-scre…

…en behavior (#2608)
sillsdev · Sep 18, 2023 · 47e97bb · 47e97bb
1 parent aae6c56
commit 47e97bb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Pronunciations/RecorderIcon.tsx b/src/components/Pronunciations/RecorderIcon.tsx
@@ -50,11 +50,9 @@ export default function RecorderIcon(props: RecorderIconProps): ReactElement {
     // Temporarily disable context menu since some browsers
     // interpret a long-press touch as a right-click.
     document.addEventListener("contextmenu", disableContextMenu, false);
-    toggleIsRecordingToTrue();
   }
   function handleTouchEnd(): void {
     enableContextMenu();
-    toggleIsRecordingToFalse();
   }
 
   function disableContextMenu(event: any): void {
@@ -68,15 +66,15 @@ export default function RecorderIcon(props: RecorderIconProps): ReactElement {
   return (
     <Tooltip title={t("pronunciations.recordTooltip")} placement="top">
       <IconButton
-        tabIndex={-1}
-        onMouseDown={toggleIsRecordingToTrue}
-        onTouchStart={handleTouchStart}
-        onMouseUp={toggleIsRecordingToFalse}
-        onTouchEnd={handleTouchEnd}
-        className={classes.button}
         aria-label="record"
+        className={classes.button}
         id={recordButtonId}
+        onPointerDown={toggleIsRecordingToTrue}
+        onPointerUp={toggleIsRecordingToFalse}
+        onTouchEnd={handleTouchEnd}
+        onTouchStart={handleTouchStart}
         size="large"
+        tabIndex={-1}
       >
         <FiberManualRecord
           className={

diff --git a/src/components/Pronunciations/tests/Pronunciations.test.tsx b/src/components/Pronunciations/tests/Pronunciations.test.tsx
@@ -71,7 +71,7 @@ describe("Pronunciations", () => {
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
 
-  it("mouseDown and mouseUp", () => {
+  it("pointereDown and pointerUp", () => {
     const mockStartRecording = jest.fn();
     const mockStopRecording = jest.fn();
     renderer.act(() => {
@@ -91,11 +91,11 @@ describe("Pronunciations", () => {
     });
 
     expect(mockStartRecording).not.toBeCalled();
-    testRenderer.root.findByProps({ id: recordButtonId }).props.onMouseDown();
+    testRenderer.root.findByProps({ id: recordButtonId }).props.onPointerDown();
     expect(mockStartRecording).toBeCalled();
 
     expect(mockStopRecording).not.toBeCalled();
-    testRenderer.root.findByProps({ id: recordButtonId }).props.onMouseUp();
+    testRenderer.root.findByProps({ id: recordButtonId }).props.onPointerUp();
     expect(mockStopRecording).toBeCalled();
   });
 

diff --git a/src/components/Pronunciations/tests/__snapshots__/Pronunciations.test.tsx.snap b/src/components/Pronunciations/tests/__snapshots__/Pronunciations.test.tsx.snap
@@ -19,6 +19,8 @@ Array [
     onMouseLeave={[Function]}
     onMouseOver={[Function]}
     onMouseUp={[Function]}
+    onPointerDown={[Function]}
+    onPointerUp={[Function]}
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}