fix: fix incorrect isTrusted value in finishScroll event (#41)

* fix: fix incorrect isTrusted value in finishScroll event * chore: add isWheelScroll, isAnimationScroll props to OnFinishScroll
naver · Jun 9, 2023 · 7a32ec8 · 7a32ec8
1 parent 5d1cf77
commit 7a32ec8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/packages/conveyer/src/Conveyer.ts b/packages/conveyer/src/Conveyer.ts
@@ -44,8 +44,9 @@ class Conveyer extends Component<ConveyerEvents> {
   protected _options: ConveyerOptions;
 
   private _scrollTimer = 0;
+  private _isWheelScroll = false;
   private _isDragScroll = false;
-  private _isAnimation = false;
+  private _isAnimationScroll = false;
   private _scrollArea: string | HTMLElement | Ref<HTMLElement>;
 
   /**
@@ -406,14 +407,12 @@ class Conveyer extends Component<ConveyerEvents> {
       },
       "change": e => {
         const nativeEvent = this._getNativeEvent(e);
-        if (nativeEvent && !isHold) {
-          return;
-        }
         if (options.useSideWheel && this._isMixedWheel(nativeEvent)) {
           return;
         }
-        this._isDragScroll = !!nativeEvent && nativeEvent.type !== "wheel";
-        this._isAnimation = !!isHold;
+        this._isWheelScroll = !!nativeEvent && nativeEvent.type === "wheel";
+        this._isDragScroll = !!nativeEvent && !this._isWheelScroll;
+        this._isAnimationScroll = !this._isWheelScroll && !isHold;
         isDrag = true;
         const scroll = e.delta.scroll;
 
@@ -586,6 +585,9 @@ class Conveyer extends Component<ConveyerEvents> {
     }
     window.clearTimeout(this._scrollTimer);
     this._scrollTimer = window.setTimeout(() => {
+      const isWheelScroll = this._isWheelScroll;
+      const isDragScroll = this._isDragScroll;
+      const isAnimationScroll = this._isAnimationScroll;
       this._scrollTimer = 0;
       /**
        * This event is fired when finish scroll.
@@ -594,12 +596,15 @@ class Conveyer extends Component<ConveyerEvents> {
        * @param {OnFinishScroll} e - The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
        */
       this.trigger("finishScroll", {
-        isDragScroll: this._isDragScroll,
-        isTrusted: this._isDragScroll || !this._isAnimation,
+        isWheelScroll,
+        isDragScroll,
+        isAnimationScroll,
+        isTrusted: isWheelScroll || isDragScroll || !isAnimationScroll,
       });
 
+      this._isWheelScroll = false;
       this._isDragScroll = false;
-      this._isAnimation = false;
+      this._isAnimationScroll = false;
     }, this._options.scrollDebounce);
   }
 }

diff --git a/packages/conveyer/src/types.ts b/packages/conveyer/src/types.ts
@@ -36,7 +36,9 @@ export interface ConveyerOptions {
  * @typedef
  */
 export interface OnFinishScroll {
+  isWheelScroll: boolean;
   isDragScroll: boolean;
+  isAnimationScroll: boolean;
   isTrusted: boolean;
 }
 

diff --git a/packages/conveyer/test/unit/Conveyer.spec.ts b/packages/conveyer/test/unit/Conveyer.spec.ts
@@ -670,6 +670,41 @@ describe("test Conveyer", () => {
       // Then
       expect(spy.callCount).to.be.equals(1);
     });
+    it("should check if isTrusted of finishScroll event is true when drag occurs", (done) => {
+      // Given
+      const items = document.querySelector<HTMLElement>(".items")!;
+      const finishScrollHandler = sinon.spy((event) => {
+        // Then
+        expect(event.isTrusted).to.be.true;
+        done();
+      });
+
+      conveyer = new Conveyer(items);
+      conveyer.on("finishScroll", finishScrollHandler);
+
+      // When
+      dispatchDrag(
+        items,
+        { left: 0, top: 0 },
+        { left: -100, top: 0 },
+        { duration: 100, interval: 50 }
+      );
+    });
+    it("should check if isTrusted of finishScroll event is false when conveyer moves by method", (done) => {
+      // Given
+      const items = document.querySelector<HTMLElement>(".items")!;
+      const finishScrollHandler = sinon.spy((event) => {
+        // Then
+        expect(event.isTrusted).to.be.false;
+        done();
+      });
+
+      conveyer = new Conveyer(items);
+      conveyer.on("finishScroll", finishScrollHandler);
+
+      // When
+      conveyer.scrollTo(600);
+    });
   });
   describe("Options", () => {
     describe("useSideWheel", () => {