feat: add a clear button for the endpoint field

Author: ludovicm67

.changeset/gentle-parts-unite.md

@@ -0,0 +1,5 @@
+---
+"@zazuko/yasgui": minor
+---
+
+This adds a clear button for the endpoint field.

packages/yasgui/src/endpointSelect.scss

@@ -97,4 +97,26 @@
       display: none;
     }
   }
+
+  .clearEndpointBtn {
+    border: 1px solid #d1d1d1;
+    background-color: #d1d1d1;
+    color: #505050;
+    border-radius: 3px;
+    cursor: pointer;
+
+    padding: 4px 8px;
+    margin: 4px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    opacity: 1;
+    transition: opacity ease-in 200ms;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }

packages/yasgui/src/endpointSelect.ts

@@ -86,10 +86,20 @@ export class EndpointSelect extends EventEmitter {
     // Create field
     this.inputField = document.createElement("input");
     addClass(this.inputField, "autocomplete");
-    // Clear the query string when clicking on the input field
-    this.inputField.addEventListener("focusin", () => (this.inputField.value = ""));
+    this.inputField.value = this.value;
     autocompleteWrapper.appendChild(this.inputField);
 
+    // Create clear button
+    const clearBtn = document.createElement("button");
+    clearBtn.title = "Clear endpoint";
+    addClass(clearBtn, "clearEndpointBtn");
+    clearBtn.innerText = "✖";
+    clearBtn.addEventListener("click", () => {
+      this.inputField.value = "";
+      this.inputField.focus();
+    });
+    this.container.appendChild(clearBtn);
+
     // Init autocomplete library
     new Autocomplete<CatalogueItem>({
       placeholder: "Search or add an endpoint",