keep table filter inputs focused even after response arrived

This commit is contained in:
Felix Hamann 2019-05-08 22:16:35 +02:00
parent f1e95daaec
commit 7dc414e233

View File

@ -161,7 +161,7 @@
tableFilterInputs.search.forEach(function(input) { tableFilterInputs.search.forEach(function(input) {
var debouncedInput = debounce(function() { var debouncedInput = debounce(function() {
if (input.value.length === 0 || input.value.length > 2) { if (input.value.length === 0 || input.value.length > 2) {
updateFromTableFilter(); updateFromTableFilter(tableFilterForm);
} }
}, INPUT_DEBOUNCE); }, INPUT_DEBOUNCE);
input.addEventListener('input', debouncedInput); input.addEventListener('input', debouncedInput);
@ -170,7 +170,7 @@
tableFilterInputs.input.forEach(function(input) { tableFilterInputs.input.forEach(function(input) {
var debouncedInput = debounce(function() { var debouncedInput = debounce(function() {
if (input.value.length === 0 || input.value.length > 2) { if (input.value.length === 0 || input.value.length > 2) {
updateFromTableFilter(); updateFromTableFilter(tableFilterForm);
} }
}, INPUT_DEBOUNCE); }, INPUT_DEBOUNCE);
input.addEventListener('input', debouncedInput); input.addEventListener('input', debouncedInput);
@ -178,37 +178,36 @@
tableFilterInputs.change.forEach(function(input) { tableFilterInputs.change.forEach(function(input) {
input.addEventListener('change', function() { input.addEventListener('change', function() {
updateFromTableFilter(); updateFromTableFilter(tableFilterForm);
}); });
}); });
tableFilterInputs.select.forEach(function(input) { tableFilterInputs.select.forEach(function(input) {
input.addEventListener('change', function() { input.addEventListener('change', function() {
updateFromTableFilter(); updateFromTableFilter(tableFilterForm);
}); });
}); });
tableFilterForm.addEventListener('submit', function(event) { tableFilterForm.addEventListener('submit', function(event) {
event.preventDefault(); event.preventDefault();
updateFromTableFilter(); updateFromTableFilter(tableFilterForm);
}); });
} }
function updateFromTableFilter() { function updateFromTableFilter(tableFilterForm) {
var url = serializeTableFilterToURL(); var url = serializeTableFilterToURL();
var callback = null; var callback = null;
var focusedSearch = tableFilterInputs.search.reduce(function(acc, input) { var focusedInput = tableFilterForm.querySelector(':focus, :active');
return acc || (input.matches(':focus') && input); // focus previously focused input
}, null); if (focusedInput) {
// focus search input var selectionStart = focusedInput.selectionStart;
if (focusedSearch) { var focusId = focusedInput.id;
var selectionStart = focusedSearch.selectionStart;
callback = function(wrapper) { callback = function(wrapper) {
var search = wrapper.querySelector('input[type="search"]'); var toBeFocused = wrapper.querySelector('#' + focusId);
if (search) { if (toBeFocused) {
search.focus(); toBeFocused.focus();
search.selectionStart = selectionStart; toBeFocused.selectionStart = selectionStart;
} }
}; };
} }