diff --git a/app/javascript/controllers/touch_placeholder_controller.js b/app/javascript/controllers/touch_placeholder_controller.js new file mode 100644 index 000000000..f1798873e --- /dev/null +++ b/app/javascript/controllers/touch_placeholder_controller.js @@ -0,0 +1,16 @@ +import { Controller } from "@hotwired/stimulus" +import { isTouchDevice } from "helpers/platform_helpers" + +export default class extends Controller { + static get shouldLoad() { + return isTouchDevice() + } + + static values = { placeholder: String } + + connect() { + if (this.hasPlaceholderValue) { + this.element.placeholder = this.placeholderValue + } + } +} diff --git a/app/views/filters/settings/_terms.html.erb b/app/views/filters/settings/_terms.html.erb index 237eea809..c7133e11a 100644 --- a/app/views/filters/settings/_terms.html.erb +++ b/app/views/filters/settings/_terms.html.erb @@ -1,8 +1,9 @@ <%= form.search_field "terms[]", placeholder: "Filter these cards… [F]", class: "filter__terms input txt-x-small", autofocus: false, autocomplete: :off, autocorrect: "off", data: { "1p-ignore": "true", - controller: "hotkey", + controller: "hotkey touch-placeholder", filter_settings_target: "field", + touch_placeholder_placeholder_value: "Filter these cards…", action: "keydown.f@document->hotkey#focus input->filter-settings#resetIfNoFiltering input->form#debouncedSubmit keydown.enter->form#submitToTopTarget blur->form#submitToTopTarget" } %> <% if filter.terms.present? %>