Use css :placeholder-shown for input clearable

Author: lazaronixon

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## [Unreleased]
+- Use css :placeholder-shown for input clearable
 
 ## 1.1.13 - 2025-03-16
 - Small refactor on transitions

lib/generators/css_zero/add/templates/app/assets/stylesheets/input_concerns.css

@@ -8,6 +8,12 @@
   background-size: cover;
 }
 
-.input--clearable ::-webkit-search-cancel-button {
-  display: none;
+.input--clearable {
+  input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  &:has(:placeholder-shown) > button {
+    display: none;
+  }
 }

lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js

@@ -1,23 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "input", "button" ]
-
-  connect() {
-    this.update()
-  }
+  static targets = [ "input" ]
 
   clear() {
     this.inputTarget.value = ""
     this.inputTarget.focus()
-    this.update()
-  }
-
-  update() {
-    this.buttonTarget.hidden = this.#isEmpty
-  }
-
-  get #isEmpty() {
-    return this.inputTarget.value === ""
   }
 }