From fe7f74ef81f22ceeb7e2832d9d10a317da19d006 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Fri, 26 Jul 2024 15:30:22 +0400
Subject: [PATCH] ScrollView UI glitch temporarily highlights text on the page
 when the scrollbar is used (T1240632) (#27834)

---
 .../js/__internal/ui/scroll_view/m_scrollbar.ts  |  4 +++-
 .../scrollable.scrollbar.tests.js                | 16 ++++++++++++++++
 .../scrollable.scrollingByThumb.tests.js         |  2 +-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/scroll_view/m_scrollbar.ts b/packages/devextreme/js/__internal/ui/scroll_view/m_scrollbar.ts
index 3a1381590844..cdfec30b44c2 100644
--- a/packages/devextreme/js/__internal/ui/scroll_view/m_scrollbar.ts
+++ b/packages/devextreme/js/__internal/ui/scroll_view/m_scrollbar.ts
@@ -92,7 +92,9 @@ const Scrollbar = (Widget as any).inherit({
     eventsEngine.on(this._$thumb, addNamespace(pointerEvents.down, SCROLLBAR), this.feedbackOn.bind(this));
   },
 
-  feedbackOn() {
+  feedbackOn(e) {
+    e?.preventDefault();
+
     this.$element().addClass(SCROLLABLE_SCROLLBAR_ACTIVE_CLASS);
     activeScrollbar = this;
   },
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollbar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollbar.tests.js
index d903ffa161d7..9661a2d9d5cf 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollbar.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollbar.tests.js
@@ -569,6 +569,22 @@ QUnit.test('scrollbar add active class when thumb is clicked', function(assert)
     assert.equal($scrollbar.hasClass(SCROLLBAR_ACTIVE_CLASS), false, 'active class was not attached after mouse up');
 });
 
+QUnit.test('preventDefault should be called when the thumb is clicked cancels the default selection behavior', function(assert) {
+    const $scrollable = $('#scrollable').dxScrollable({
+        useNative: false,
+        showScrollbar: 'onHover',
+        scrollByThumb: true
+    });
+
+    const $thumb = $scrollable.find(`.${SCROLLABLE_SCROLL_CLASS}`);
+
+    const mouse = pointerMock($thumb).start();
+
+    mouse.down();
+
+    assert.strictEqual(mouse.lastEvent().isDefaultPrevented(), true, 'default action is prevented for dxpointerdown on a thumb click');
+});
+
 QUnit.test('scrollbar add active class when click on scrollbar area', function(assert) {
     const SCROLLBAR_ACTIVE_CLASS = SCROLLABLE_SCROLLBAR_ACTIVE_CLASS;
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollingByThumb.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollingByThumb.tests.js
index aeb2fadd6064..6a127df3591a 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollingByThumb.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/scrollableParts/scrollable.scrollingByThumb.tests.js
@@ -113,7 +113,7 @@ QUnit.test('scroll by thumb', function(assert) {
     mouse.move(0, distance);
     location = getScrollOffset($scrollable);
 
-    assert.notOk(downEvent.isDefaultPrevented(), 'default is not prevented'); // T516691
+    assert.strictEqual(downEvent.isDefaultPrevented(), true, 'default should be prevented (T1240632)');
     assert.equal(location.top, -distance / containerToContentRatio, 'scroll follows pointer');
 
     mouse.move(0, distance);