Merge pull request #1691 from basecamp/search-ergonomics

Better focus and clearing when searching

app/assets/stylesheets/card-columns.css

@@ -176,6 +176,10 @@
     [aria-selected] & .card[aria-selected] {
       outline: var(--focus-ring-size) solid var(--color-selected-dark);
       outline-offset: var(--focus-ring-offset);
+
+      @media (prefers-color-scheme: dark) {
+        outline-color: oklch(var(--lch-blue-medium));
+      }
     }
   }
 

app/javascript/controllers/bar_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { post } from "@rails/request.js"
+import { nextFrame } from "helpers/timing_helpers";
 
 export default class extends Controller {
   static targets = [ "turboFrame", "search", "searchInput", "form", "buttonsContainer" ]
@@ -21,6 +22,15 @@ export default class extends Controller {
     this.#hideItem(this.searchTarget)
   }
 
+  clearInput() {
+    if (this.searchInputTarget.value) {
+      this.searchInputTarget.value = ""
+      this.searchInputTarget.focus()
+    } else {
+      this.reset()
+    }
+  }
+
   showModalAndSubmit(event) {
     this.showModal()
     this.formTarget.requestSubmit()
@@ -50,10 +60,12 @@ export default class extends Controller {
     this.turboFrameTarget.innerHtml = ""
   }
 
-  #showItem(element) {
+  async #showItem(element) {
     element.removeAttribute("hidden")
 
     const autofocusElement = element.querySelector("[autofocus]")
+
+    await nextFrame()
     autofocusElement?.focus()
     autofocusElement?.select()
   }

app/views/searches/_form.html.erb

@@ -9,7 +9,7 @@
         data: {
           bar_target: "searchInput",
           action: "keydown.enter->bar#showModalAndSubmit:prevent keydown.esc->bar#reset" } %>
-  <button class="search__reset btn btn--circle borderless" data-action="bar#reset">
+  <button class="search__reset btn btn--circle borderless" data-action="bar#clearInput">
     <%= icon_tag "close" %>
     <span class="for-screen-reader">Close search</span>
   </button>