From b6c8e893a8ce30c87f92ff8d2d781cec4b33ca6b Mon Sep 17 00:00:00 2001
From: Alex <40072887+alexdcrane@users.noreply.github.com>
Date: Fri, 22 May 2026 14:37:55 -0700
Subject: [PATCH] Add clear button to searchable domain selector (#7984)
* Add clear button to searchable domain selector
* Update css.php
---
themes/default/css.php | 19 ++++++++++++++++++-
themes/default/template.php | 25 +++++++++++++++++++++++--
2 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/themes/default/css.php b/themes/default/css.php
index 035833ec0..0ca150703 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -4189,7 +4189,24 @@ else { //default: white
.domain-search-empty {
padding: 8px 10px;
color: ;
- };
+ }
+
+ .domain-search-clear {
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ color: #333;
+ opacity: 0.6;
+ padding: 0;
+ line-height: 1;
+ pointer-events: auto;
+ z-index: 2;
+ }
-
+
{*//link to custom css file *}
{if !empty($settings.theme.custom_css)}
@@ -795,7 +795,24 @@
var input = document.createElement('input');
input.type = 'text';
input.className = 'formfld domain-search-input';
- input.placeholder = '{/literal}{$text.label_search_domains}{literal}...';
+ input.placeholder = '{/literal}{$text.label_search_domains}{literal}..';
+
+ var clear_button = document.createElement('button');
+ clear_button.type = 'button';
+ clear_button.className = 'domain-search-clear';
+ clear_button.innerHTML = '×';
+ clear_button.setAttribute('aria-label', 'Clear search');
+ picker.appendChild(clear_button);
+
+ clear_button.addEventListener('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ input.value = '';
+ active_index = -1;
+ clear_button.style.display = 'none';
+ render_results();
+ input.focus();
+ });
var results = document.createElement('div');
results.className = 'domain-search-results';
@@ -831,6 +848,7 @@
function sync_input_to_select() {
input.value = get_selected_label();
+ clear_button.style.display = (input.value.trim() !== '') ? 'inline-flex' : 'none';
}
// Results panel is on document.body; match .formfld / theme input typography
@@ -948,6 +966,9 @@
}
results.appendChild(row);
}
+ // Toggle clear button visibility based on current input
+ clear_button.style.display = (input.value.trim() !== '') ? 'inline-flex' : 'none';
+
open_results();
window.requestAnimationFrame(position_results_panel);
}