diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index c34b61e03..35605b9dc 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -41,7 +41,7 @@ module FiltersHelper end def filter_title(title) - tag.strong title, class: "popup__title", tabindex: "-1", data: { dialog_focus_target: "touch" } + tag.strong title, class: "popup__title", tabindex: "-1", data: { dialog_target: "focusTouch" } end def collapsible_nav_section(title, **properties, &block) diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js index f6449cea7..145c16059 100644 --- a/app/javascript/controllers/dialog_controller.js +++ b/app/javascript/controllers/dialog_controller.js @@ -1,8 +1,9 @@ import { Controller } from "@hotwired/stimulus" import { orient } from "helpers/orientation_helpers" +import { isTouchDevice } from "helpers/platform_helpers" export default class extends Controller { - static targets = [ "dialog" ] + static targets = [ "dialog", "focusMouse", "focusTouch" ] static values = { modal: { type: Boolean, default: false }, sizing: { type: Boolean, default: true }, @@ -10,6 +11,7 @@ export default class extends Controller { } connect() { + this.#setupFocus() this.dialogTarget.setAttribute("aria-hidden", "true") if (this.autoOpenValue) this.open() } @@ -63,4 +65,10 @@ export default class extends Controller { captureKey(event) { if (event.key !== "Escape") { event.stopPropagation() } } + + #setupFocus() { + const touch = isTouchDevice() + if (this.hasFocusMouseTarget) this.focusMouseTarget.autofocus = !touch + if (this.hasFocusTouchTarget) this.focusTouchTarget.autofocus = touch + } } diff --git a/app/javascript/controllers/dialog_focus_controller.js b/app/javascript/controllers/dialog_focus_controller.js deleted file mode 100644 index 57dcf840e..000000000 --- a/app/javascript/controllers/dialog_focus_controller.js +++ /dev/null @@ -1,16 +0,0 @@ -import { Controller } from "@hotwired/stimulus" -import { isTouchDevice } from "helpers/platform_helpers" - -export default class extends Controller { - static targets = [ "mouse", "touch" ] - - connect() { - this.#setup() - } - - #setup() { - const touch = isTouchDevice() - if (this.hasMouseTarget) this.mouseTarget.autofocus = !touch - if (this.hasTouchTarget) this.touchTarget.autofocus = touch - } -} diff --git a/app/views/events/index/filter/_board.html.erb b/app/views/events/index/filter/_board.html.erb index e0baed89b..7bf50062c 100644 --- a/app/views/events/index/filter/_board.html.erb +++ b/app/views/events/index/filter/_board.html.erb @@ -18,7 +18,7 @@ <%= filter_dialog "Board…" do %> <%= filter_title "Board…" %> <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true, - type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %> + type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>