FIX: horizontal scrolling was not working correctly (#19236)

Fixes broken behaviour of arrow buttons for certain users as the interval to scroll menu can be cancelled before the scrolling actually happens.

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js

@@ -28,8 +28,7 @@ export default class HorizontalOverflowNav extends Component {
     }
 
     this.watchScroll(event);
-    return (this.hasScroll =
+    this.hasScroll = event.target.scrollWidth > event.target.offsetWidth;
-      event.target.scrollWidth > event.target.offsetWidth);
   }
 
   @bind
@@ -86,19 +85,22 @@ export default class HorizontalOverflowNav extends Component {
     };
 
     const removeDragScroll = function () {
-      document.removeEventListener("mousemove", mouseDragScroll);
-
       navPills.querySelectorAll("a").forEach((a) => {
         a.style.cursor = "pointer";
       });
     };
 
-    document.addEventListener("mousemove", mouseDragScroll);
+    document.addEventListener("mousemove", mouseDragScroll, { once: true });
-    document.addEventListener("mouseup", removeDragScroll);
+    document.addEventListener("mouseup", removeDragScroll, { once: true });
   }
 
   @action
-  horizScroll(event) {
+  horizontalScroll(event) {
+    // Do nothing if it is not left mousedown
+    if (event.which !== 1) {
+      return;
+    }
+
     let scrollSpeed = 175;
     let siblingTarget = event.target.previousElementSibling;
 
@@ -107,11 +109,10 @@ export default class HorizontalOverflowNav extends Component {
       siblingTarget = event.target.nextElementSibling;
     }
 
+    siblingTarget.scrollLeft += scrollSpeed;
+
     this.scrollInterval = setInterval(function () {
       siblingTarget.scrollLeft += scrollSpeed;
     }, 50);
-
-    event.target.addEventListener("mouseup", this.stopScroll);
-    event.target.addEventListener("mouseleave", this.stopScroll);
   }
 }

app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs

@@ -5,9 +5,11 @@
   {{#if this.hasScroll}}
     <a
       role="button"
-      {{on "mousedown" this.horizScroll}}
+      {{on "mousedown" this.horizontalScroll}}
+      {{on "mouseup" this.stopScroll}}
+      {{on "mouseleave" this.stopScroll}}
       data-direction="left"
-      class="horizontal-overflow-nav__scroll-left {{if this.hideLeftScroll "disabled"}}"
+      class={{concat-class "horizontal-overflow-nav__scroll-left" (if this.hideLeftScroll "disabled")}}
     >
       {{d-icon "chevron-left"}}
     </a>
@@ -26,8 +28,10 @@
   {{#if this.hasScroll}}
     <a
       role="button"
-      {{on "mousedown" this.horizScroll}}
+      {{on "mousedown" this.horizontalScroll}}
-      class="horizontal-overflow-nav__scroll-right {{if this.hideRightScroll "disabled"}}"
+      {{on "mouseup" this.stopScroll}}
+      {{on "mouseleave" this.stopScroll}}
+      class={{concat-class "horizontal-overflow-nav__scroll-right" (if this.hideRightScroll "disabled")}}
     >
       {{d-icon "chevron-right"}}
     </a>

spec/support/system_helpers.rb

@@ -22,4 +22,12 @@ module SystemHelpers
     backoff += frequency
     retry
   end
+
+  def resize_window(width: nil, height: nil)
+    original_size = page.driver.browser.manage.window.size
+    page.driver.browser.manage.window.resize_to(width || original_size.width, height || original_size.height)
+    yield
+  ensure
+    page.driver.browser.manage.window.resize_to(original_size.width, original_size.height)
+  end
 end

spec/system/page_objects/pages/user_preferences.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class UserPreferences < PageObjects::Pages::Base
+      def visit(user)
+        page.visit("/u/#{user.username}/preferences")
+        self
+      end
+
+      def click_secondary_navigation_menu_scroll_right
+        find(".horizontal-overflow-nav__scroll-right").click
+      end
+
+      def click_secondary_navigation_menu_scroll_left
+        find(".horizontal-overflow-nav__scroll-left").click
+      end
+
+      INTERFACE_LINK_CSS_SELECTOR = ".nav-tracking"
+
+      def has_interface_link_visible?
+        horizontal_secondary_link_visible?(INTERFACE_LINK_CSS_SELECTOR, visible: true)
+      end
+
+      def has_interface_link_not_visible?
+        horizontal_secondary_link_visible?(INTERFACE_LINK_CSS_SELECTOR, visible: false)
+      end
+
+      ACCOUNT_LINK_CSS_SELECTOR = ".nav-account"
+
+      def has_account_link_visible?
+        horizontal_secondary_link_visible?(ACCOUNT_LINK_CSS_SELECTOR, visible: true)
+      end
+
+      def has_account_link_not_visible?
+        horizontal_secondary_link_visible?(ACCOUNT_LINK_CSS_SELECTOR, visible: false)
+      end
+
+      private
+
+      def horizontal_secondary_link_visible?(selector, visible: true)
+        within(".user-navigation-secondary") do
+          page.has_selector?(selector, visible: visible)
+        end
+      end
+    end
+  end
+end

spec/system/user_preferences_navigation_spec.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+describe 'Redesigned user page navigation menu', type: :system, js: true do
+  fab!(:user) { Fabricate(:user) }
+  let(:everyone_group) { Group[:everyone] }
+  let(:user_preferences_page) { PageObjects::Pages::UserPreferences.new }
+
+  describe "when visiting the user's preferences page with redesigned user page nav enabled" do
+    it 'should allow the user to scroll the horizontal navigation menu when window width is narrow' do
+      everyone_group.add(user)
+      SiteSetting.enable_new_user_profile_nav_groups = everyone_group.name
+
+      resize_window(width: 400) do
+        sign_in(user)
+
+        user_preferences_page.visit(user)
+
+        expect(user_preferences_page).to have_interface_link_not_visible
+        expect(user_preferences_page).to have_account_link_visible
+
+        user_preferences_page.click_secondary_navigation_menu_scroll_right
+
+        expect(user_preferences_page).to have_interface_link_visible
+        expect(user_preferences_page).to have_account_link_not_visible
+
+        user_preferences_page.click_secondary_navigation_menu_scroll_left
+
+        expect(user_preferences_page).to have_interface_link_not_visible
+        expect(user_preferences_page).to have_account_link_visible
+      end
+    end
+  end
+end