yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance dropdown component by adding overflow handling and improving search input styling for better usability.

Browse source
This commit is contained in:
Yaro Kasear 2025-07-24 11:25:34 -05:00
parent e96150a92b
commit 01c891b903
1 changed files with 20 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

28
inventory/templates/fragments/_dropdown_fragment.html
View file

@ -8,17 +8,19 @@
{% endif %}
</label>
<div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
<button class="btn btn-outline-dark dropdown-toggle w-100 overflow-x-hidden" type="button" data-bs-toggle="dropdown"
data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
{{ current_item.identifier if current_item else '-' }}
</button>
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<ul class="dropdown-menu w-100" id="menu{{ id }}">
<input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
{% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
{% endfor %}
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
<input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0" id="search{{ id }}" placeholder="Search...">
<div class="overflow-auto overflow-x-hidden" style="max-height: 35vh; z-index: 9999;" id="{{ id }}DropdownContent">
{% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
{% endfor %}
</div>
</ul>
</div>
<script>
@ -34,15 +36,25 @@
document.addEventListener("DOMContentLoaded", () => {
const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
const {{ id }}Input = document.getElementById("{{ id }}");
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent");
const {{ id }}Button = document.getElementById("{{ id }}Button");
{{ id }}Button.addEventListener("shown.bs.dropdown", () => {
const menuHeight = {{ id }}Dropdown.clientHeight;
const inputHeight = {{ id }}SearchInput.offsetHeight;
const availableHeight = menuHeight - inputHeight;
{{ id }}DropdownContent.style.maxHeight = availableHeight + "px";
console.log("Dropdown content max height set to:", availableHeight + "px");
});
{{ id }}Dropdown.addEventListener("click", (e) => {
if (e.target.tagName === "A") {
{{ id }}Input.value = e.target.dataset.invValue;
console.log("Selected {{ id }} ID:", {{ id }}Input.value);
}
});
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
console.log({{ id }}SearchInput);
{{ id }}SearchInput.addEventListener("input", () => {
const filter = {{ id }}SearchInput.value.toLowerCase();