Fixes for input autofocus, etc

This commit is contained in:
Oliver Walters 2022-03-29 23:49:06 +11:00
parent f724f4a845
commit 016d802a10
3 changed files with 19 additions and 9 deletions

View File

@ -157,7 +157,7 @@ function inventreeDocReady() {
});
// Calbacks for search panel
$('#offcanvas-search').on('show.bs.offcanvas', openSearchPanel);
$('#offcanvas-search').on('shown.bs.offcanvas', openSearchPanel);
$('#offcanvas-search').on('hidden.bs.offcanvas', closeSearchPanel);
// Callbacks for notifications panel

View File

@ -27,16 +27,23 @@ function openSearchPanel() {
clearSearchResults();
// Finally, grab keyboard focus in the search bar
panel.find('#search-input').focus();
panel.find('#search-input').on('keyup change', searchTextChanged);
// Callback for "clear search" button
panel.find('#search-clear').click(function() {
panel.find('#search-clear').click(function(event) {
// Prevent this button from actually submitting the form
event.preventDefault();
panel.find('#search-input').val('');
clearSearchResults();
});
// Callback for the "close search" button
panel.find('#search-close').click(function(event) {
// Prevent this button from actually submitting the form
event.preventDefault();
});
}
var searchRequests = [];
@ -211,6 +218,9 @@ function clearSearchResults() {
// Delete any existing search results
panel.find('#search-results').empty();
// Finally, grab keyboard focus in the search bar
panel.find('#search-input').focus();
}

View File

@ -5,13 +5,13 @@
<form action='{% url "search" %}' method='post' class='d-flex' style='width: 100%;'>
{% csrf_token %}
<div class='input-group'>
<input type="text" name='search' class="form-control" aria-label='{% trans "Search" %}' id="search-input" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
<button id='search-clear' class='btn btn-outline-secondary' title='{% trans "Clear search" %}'>
<span class='fas fa-backspace'></span>
</button>
<input type="text" name='search' class="form-control" aria-label='{% trans "Search" %}' id="search-input" placeholder="{% trans 'Search' %}" autofocus>
<button type='submit' id='search-complete' class='btn btn-outline-secondary' title='{% trans "Show full search results" %}'>
<span class='fas fa-search'></span>
</button>
<button id='search-clear' class='btn btn-outline-secondary' title='{% trans "Clear search" %}'>
<span class='fas fa-backspace'></span>
</button>
<!--
<button id='search-filter' class="btn btn-outline-secondary" title='{% trans "Filter results" %}'>
<span class='fas fa-filter'></span>