fix: touch bug in onDragTransitionEnd, closes #1217

Author: fkhadra

src/components/Toast.cy.tsx

@@ -174,6 +174,48 @@ describe('Toast', () => {
     progressBar.isRunning();
   });
 
+  it('pauses progress bar on mouse pointerup released over the toast', () => {
+    cy.mount(
+      <Toast {...REQUIRED_PROPS} autoClose={5000} pauseOnHover>
+        hello
+      </Toast>
+    );
+
+    cy.resolveEntranceAnimation();
+    progressBar.isRunning();
+
+    cy.findByRole('alert').then($el => {
+      const rect = $el[0].getBoundingClientRect();
+      cy.wrap($el).trigger('pointerup', {
+        pointerType: 'mouse',
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2
+      });
+    });
+    progressBar.isPaused();
+  });
+
+  it('does not pause progress bar on touch pointerup (hover has no meaning for touch)', () => {
+    cy.mount(
+      <Toast {...REQUIRED_PROPS} autoClose={5000} pauseOnHover>
+        hello
+      </Toast>
+    );
+
+    cy.resolveEntranceAnimation();
+    progressBar.isRunning();
+
+    cy.findByRole('alert').then($el => {
+      const rect = $el[0].getBoundingClientRect();
+      cy.wrap($el).trigger('pointerup', {
+        pointerType: 'touch',
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2
+      });
+    });
+    progressBar.isRunning();
+  });
+
   describe('controller progress bar', () => {
     it('set the correct progress value bar disregarding autoClose value', () => {
       cy.mount(

src/hooks/useToast.ts

@@ -81,8 +81,9 @@ export function useToast(props: ToastProps) {
   function onDragTransitionEnd(e: React.PointerEvent<HTMLElement>) {
     const { top, bottom, left, right } = toastRef.current!.getBoundingClientRect();
 
+    // Touch/pen releases don't "hover" — only re-pause on a mouse release over the toast.
     if (
-      e.nativeEvent.type !== 'touchend' &&
+      e.pointerType === 'mouse' &&
       props.pauseOnHover &&
       e.clientX >= left &&
       e.clientX <= right &&