Stop scrolling to top when opening dialog

app/assets/javascripts/controllers/hw_combobox_controller.js

@@ -12,6 +12,7 @@ const concerns = [
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
   Combobox.Callbacks,
+  Combobox.Devices,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,

app/assets/javascripts/hotwire_combobox.esm.js

@@ -248,6 +248,20 @@ Combobox.Callbacks = Base => class extends Base {
   }
 };
 
+Combobox.Devices = Base => class extends Base {
+  get _isiOS() {
+    return this._isMobileWebkit && !this._isAndroid
+  }
+
+  get _isAndroid() {
+    return window.navigator.userAgent.includes("Android")
+  }
+
+  get _isMobileWebkit() {
+    return window.navigator.userAgent.includes("AppleWebKit") && window.navigator.userAgent.includes("Mobile")
+  }
+};
+
 Combobox.Dialog = Base => class extends Base {
   rerouteListboxStreamToDialog({ detail: { newStream } }) {
     if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
@@ -259,6 +273,10 @@ Combobox.Dialog = Base => class extends Base {
     if (window.visualViewport) {
       window.visualViewport.addEventListener("resize", this._resizeDialog);
     }
+
+    if (this._isiOS) {
+      this.dialogTarget.style.position = "absolute";
+    }
   }
 
   _disconnectDialog() {
@@ -286,9 +304,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _resizeDialog = () => {
-    if (window.visualViewport) {
-      this.dialogTarget.style.setProperty("--hw-visual-viewport-height", `${window.visualViewport.height}px`);
-    }
+    this.dialogTarget.style.setProperty("--hw-visual-viewport-height", `${window.visualViewport.height}px`);
   }
 
   // After closing a dialog, focus returns to the last focused element.
@@ -1618,6 +1634,7 @@ Combobox.Toggle = Base => class extends Base {
     this._preventFocusingComboboxAfterClosingDialog();
     this._preventBodyScroll();
     this.dialogTarget.showModal();
+    this._resizeDialog();
   }
 
   _openInline() {
@@ -1703,6 +1720,7 @@ const concerns = [
   Combobox.AsyncLoading,
   Combobox.Autocomplete,
   Combobox.Callbacks,
+  Combobox.Devices,
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,

app/assets/javascripts/hw_combobox/models/combobox.js

@@ -5,6 +5,7 @@ import "hw_combobox/models/combobox/announcements"
 import "hw_combobox/models/combobox/async_loading"
 import "hw_combobox/models/combobox/autocomplete"
 import "hw_combobox/models/combobox/callbacks"
+import "hw_combobox/models/combobox/devices"
 import "hw_combobox/models/combobox/dialog"
 import "hw_combobox/models/combobox/events"
 import "hw_combobox/models/combobox/filtering"

app/assets/javascripts/hw_combobox/models/combobox/devices.js

@@ -0,0 +1,15 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+Combobox.Devices = Base => class extends Base {
+  get _isiOS() {
+    return this._isMobileWebkit && !this._isAndroid
+  }
+
+  get _isAndroid() {
+    return window.navigator.userAgent.includes("Android")
+  }
+
+  get _isMobileWebkit() {
+    return window.navigator.userAgent.includes("AppleWebKit") && window.navigator.userAgent.includes("Mobile")
+  }
+}

app/assets/javascripts/hw_combobox/models/combobox/dialog.js

@@ -11,6 +11,10 @@ Combobox.Dialog = Base => class extends Base {
     if (window.visualViewport) {
       window.visualViewport.addEventListener("resize", this._resizeDialog)
     }
+
+    if (this._isiOS) {
+      this.dialogTarget.style.position = "absolute"
+    }
   }
 
   _disconnectDialog() {
@@ -38,9 +42,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _resizeDialog = () => {
-    if (window.visualViewport) {
-      this.dialogTarget.style.setProperty("--hw-visual-viewport-height", `${window.visualViewport.height}px`)
-    }
+    this.dialogTarget.style.setProperty("--hw-visual-viewport-height", `${window.visualViewport.height}px`)
   }
 
   // After closing a dialog, focus returns to the last focused element.

app/assets/javascripts/hw_combobox/models/combobox/toggle.js

@@ -121,6 +121,7 @@ Combobox.Toggle = Base => class extends Base {
     this._preventFocusingComboboxAfterClosingDialog()
     this._preventBodyScroll()
     this.dialogTarget.showModal()
+    this._resizeDialog()
   }
 
   _openInline() {

app/assets/stylesheets/hotwire_combobox.css

@@ -22,7 +22,7 @@
   --hw-dialog-label-size: 1.05rem;
   --hw-dialog-listbox-margin: 1.25rem 0 0;
   --hw-dialog-padding: 1rem 1rem 0;
-  --hw-dialog-top-offset: 4rem;
+  --hw-dialog-top-offset: 18vh;
 
   --hw-font-size: 1rem;
 
@@ -201,7 +201,7 @@
   overflow: hidden;
   padding: var(--hw-dialog-padding);
   pointer-events: auto;
-  position: absolute;
+  position: fixed;
   top: var(--hw-dialog-top-offset);
   width: auto;
 

test/application_system_test_case.rb

@@ -1,6 +1,6 @@
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
   include ComboboxActionsHelper
-  include ComboboxAssertionsHelper
+  include ComboboxAssertionsHelper, ViewportAssertionsHelper
 
   driven_by :selenium, using: :headless_chrome
 

test/dummy/app/controllers/comboboxes_controller.rb

@@ -4,6 +4,9 @@ class ComboboxesController < ApplicationController
   def plain
   end
 
+  def padded
+  end
+
   def open
   end
 

test/dummy/app/views/comboboxes/padded.html.erb

@@ -0,0 +1,12 @@
+<%= tag.style nonce: content_security_policy_nonce do %>
+  .wrapper {
+    border: 2px dashed green;
+    padding-top: 2000px;
+  }
+<% end %>
+
+<h1 id="to-be-hidden-by-dialog">To be hidden by dialog</h1>
+
+<div class="wrapper">
+  <%= combobox_tag "state", @state_options, id: "state-field" %>
+</div>

test/dummy/config/routes.rb

@@ -1,5 +1,6 @@
 Rails.application.routes.draw do
   get "plain", to: "comboboxes#plain"
+  get "padded", to: "comboboxes#padded"
   get "open", to: "comboboxes#open"
   get "html_options", to: "comboboxes#html_options"
   get "prefilled", to: "comboboxes#prefilled"

test/lib/helpers/viewport_assertions_helper.rb

@@ -0,0 +1,23 @@
+module ViewportAssertionsHelper
+  def assert_in_viewport(element, message = "Expected element to be in the viewport, but it was not visible.")
+    assert element_in_viewport?(element), message
+  end
+
+  def assert_not_in_viewport(element, message = "Expected element to be outside the viewport, but it was visible.")
+    assert_not element_in_viewport?(element), message
+  end
+
+  private
+    def element_in_viewport?(element)
+      page.execute_script(<<-JS, element)
+        const el = arguments[0]
+        const rect = el.getBoundingClientRect()
+        return (
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        )
+      JS
+    end
+end

test/system/dialog_test.rb

@@ -22,13 +22,18 @@ class DialogTest < ApplicationSystemTestCase
     end
   end
 
-  test "selecting options within a dialog" do
-    visit dialog_path
+  test "no scrolling behind dialog" do
+    on_small_screen do
+      visit padded_path
+
+      title_element = find("#to-be-hidden-by-dialog")
 
-    click_on "Show modal"
+      assert_in_viewport title_element
+      page.scroll_to(find("#state-field"))
+      assert_not_in_viewport title_element
 
-    open_combobox "#movie_rating"
-    click_on_option "R"
-    assert_combobox_display_and_value "#movie_rating", "R", Movie.ratings[:R]
+      open_combobox "#state-field"
+      assert_not_in_viewport title_element
+    end
   end
 end

test/system/hotwire_combobox_test.rb

@@ -164,4 +164,14 @@ class HotwireComboboxTest < ApplicationSystemTestCase
 
     assert_combobox_display_and_value "#form_state_id", "Alabama", states(:alabama).id
   end
+
+  test "selecting options within a modal dialog" do
+    visit dialog_path
+
+    click_on "Show modal"
+
+    open_combobox "#movie_rating"
+    click_on_option "R"
+    assert_combobox_display_and_value "#movie_rating", "R", Movie.ratings[:R]
+  end
 end