fix: don't close search if children have focus, closes #13004

This commit is contained in:
Barış Soner Uşaklı
2024-12-23 16:28:53 -05:00
parent 5b2dfd740c
commit 1cb7bb6a72
2 changed files with 12 additions and 11 deletions

View File

@@ -28,9 +28,9 @@ define('search', [
const toggleVisibility = searchFields.hasClass('hidden');
if (toggleVisibility) {
searchInput.off('blur').on('blur', function dismissSearch() {
searchFields.off('focusout').on('focusout', function dismissSearch() {
setTimeout(function () {
if (!searchInput.is(':focus')) {
if (!searchFields.find(':focus').length) {
searchFields.addClass('hidden');
searchButton.removeClass('hidden');
}
@@ -177,30 +177,33 @@ define('search', [
doSearch();
}, 500));
let mousedownOnResults = false;
quickSearchResults.on('mousedown', '.quick-search-results > *', function () {
$(window).one('mouseup', function () {
quickSearchResults.addClass('hidden');
});
mousedownOnResults = true;
});
inputEl.on('blur', function () {
const inputParent = inputEl.parent();
const resultParent = quickSearchResults.parent();
inputParent.on('focusout', hideResults);
resultParent.on('focusout', hideResults);
function hideResults() {
setTimeout(function () {
if (!inputEl.is(':focus') && !mousedownOnResults && !quickSearchResults.hasClass('hidden')) {
if (!inputParent.find(':focus').length && !resultParent.find(':focus').length && !quickSearchResults.hasClass('hidden')) {
quickSearchResults.addClass('hidden');
}
}, 200);
});
}
let ajaxified = false;
hooks.on('action:ajaxify.end', function () {
if (!ajaxify.isCold()) {
ajaxified = true;
}
quickSearchResults.addClass('hidden');
});
inputEl.on('focus', function () {
mousedownOnResults = false;
const query = inputEl.val();
oldValue = query;
if (query && quickSearchResults.find('#quick-search-results').children().length) {

View File

@@ -1,6 +1,4 @@
<div class="tool-modal d-flex">
<div class="card shadow">
<h5 class="card-header">[[topic:thread-tools.merge-topics]]</h5>
<div class="card-body">
@@ -13,7 +11,7 @@
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<div class="quick-search-container dropdown-menu d-block p-2 hidden">
<div class="quick-search-container dropdown-menu d-block p-2 hidden w-100">
<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
<div class="quick-search-results-container"></div>
</div>