diff --git a/.changeset/gentle-parts-unite.md b/.changeset/gentle-parts-unite.md new file mode 100644 index 00000000..52c00c3f --- /dev/null +++ b/.changeset/gentle-parts-unite.md @@ -0,0 +1,5 @@ +--- +"@zazuko/yasgui": minor +--- + +This adds a clear button for the endpoint field. diff --git a/packages/yasgui/src/endpointSelect.scss b/packages/yasgui/src/endpointSelect.scss index d818149e..65c10cc9 100644 --- a/packages/yasgui/src/endpointSelect.scss +++ b/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; + } + } } diff --git a/packages/yasgui/src/endpointSelect.ts b/packages/yasgui/src/endpointSelect.ts index 57214274..986ff025 100644 --- a/packages/yasgui/src/endpointSelect.ts +++ b/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({ placeholder: "Search or add an endpoint",