diff --git a/src/pretix/static/pretixcontrol/js/ui/main.js b/src/pretix/static/pretixcontrol/js/ui/main.js
index b8f31d7283..38d7edc5ca 100644
--- a/src/pretix/static/pretixcontrol/js/ui/main.js
+++ b/src/pretix/static/pretixcontrol/js/ui/main.js
@@ -446,6 +446,15 @@ let form_handlers = function (el) {
})
})
+ function addClearButton($input) {
+ var $btn = $("").insertAfter($input).on('click', function(e) {
+ $input.val('').trigger('input').trigger('change'); e.preventDefault()
+ }).toggle($input.val() !== '')
+ $input.on('input', function() {
+ $btn.toggle($input.val() !== '')
+ })
+ }
+
el.find('div.scrolling-choice:not(.no-search)').each(function () {
if ($(this).find('input[type=text]').length > 0) {
return
@@ -453,6 +462,7 @@ let form_handlers = function (el) {
let $menu = $('
').addClass('choice-options-menu')
let $inp_search = $('').addClass('form-control').attr('type', 'text').attr('placeholder', gettext('Search query'))
$menu.append($inp_search)
+ addClearButton($inp_search)
$(this).prepend($menu)
$inp_search.on('keyup change', function (e) {
@@ -481,6 +491,7 @@ let form_handlers = function (el) {
$menu.append($lbl_tgl)
}
$(this).prepend($menu)
+ addClearButton($inp_search)
$(this).find('.choice-options-none').click(function (e) {
$(this).closest('.scrolling-multiple-choice').find('input[type=checkbox]:not(.menu-checkbox)').prop('checked', false)
diff --git a/src/pretix/static/pretixcontrol/scss/_forms.scss b/src/pretix/static/pretixcontrol/scss/_forms.scss
index dfffbee25d..f23026b6b5 100644
--- a/src/pretix/static/pretixcontrol/scss/_forms.scss
+++ b/src/pretix/static/pretixcontrol/scss/_forms.scss
@@ -417,6 +417,8 @@ div.scrolling-multiple-choice, div.scrolling-choice {
}
}
}
+.clear-input-button { width: 2em; margin-left: -3em; margin-right: 1em; height: 2em; background: transparent; border: 0; color: #aaa; }
+.clear-input-button:hover { color: #777; }
.team-permission-groups {
border: 1px solid $input-border;
border-radius: $input-border-radius;