Enhance SBAdmin widgets with full-width and searchable options (#131)

* Enhance SBAdmin widgets with full-width and searchable options

- Added `searchable_template_name` and `searchable` parameter to `SBAdminSelectWidget` and `SBAdminMultipleChoiceWidget`.
- Introduced `full_width` parameter to adjust widget width dynamically.
- Implemented `syncDropdownMenuWidth` utility to synchronize dropdown menu width with the wrapper.
- Created `StaticAutocomplete` class for static option handling in autocomplete widgets.
- Updated templates to support new full-width and searchable features.

This update improves the usability and flexibility of the SBAdmin widget components.

* Refactor SBAdminSelectWidget and introduce searchable choice widgets

- Removed the `searchable` parameter from `SBAdminSelectWidget` and `SBAdminMultipleChoiceWidget`.
- Added `SBAdminChoiceSearchableWidget` and `SBAdminMultipleChoiceSearchableWidget` for searchable dropdowns.
- Updated widget initialization to streamline parameters and improve clarity.
- Enhanced context handling for full-width display in new searchable widgets.

This update improves the organization and usability of selection widgets in the SBAdmin interface.

* Refactor autocomplete and choice search widget templates

- Removed the `full_width` condition from the wrapper div in both `autocomplete.html` and `choice_search.html` templates.
- Simplified the structure of the widget templates to enhance readability and maintainability.

This update streamlines the widget templates for better consistency in the SBAdmin interface.

* Update SBAdmin widget initialization to set full_width to False

- Changed the default value of the `full_width` parameter to False in `SBAdminChoiceSearchableWidget`, `SBAdminMultipleChoiceSearchableWidget`, and `SBAdminAutocompleteWidget`.
- This adjustment aligns the widget behavior with recent template refactoring for improved consistency in the SBAdmin interface.

---------

Co-authored-by: oko-vac <oko-vac@users.noreply.github.com>

Author: oko-vac

.coverage

@@ -278,6 +278,50 @@ class SBAdminMultipleChoiceInlineWidget(SBAdminMultipleChoiceWidget):
     option_template_name = "sb_admin/widgets/checkbox.html"
 
 
+class SBAdminChoiceSearchableWidget(SBAdminBaseWidget, forms.Select):
+    """Single-choice dropdown with client-side search (Choices.js).
+
+    Shares the autocomplete UI shell with ``SBAdminAutocompleteWidget`` but the
+    options are rendered inline as ``<option>`` tags — no API fetch, no
+    pagination. The native ``<select>`` submits as a single value, so a plain
+    ``ChoiceField`` is enough on the backend.
+    """
+
+    template_name = "sb_admin/widgets/choice_search.html"
+
+    def __init__(self, form_field=None, attrs=None, choices=(), full_width=False):
+        self.full_width = full_width
+        super().__init__(
+            form_field, attrs={"class": "input", **(attrs or {})}, choices=choices
+        )
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"]["full_width"] = self.full_width
+        return context
+
+
+class SBAdminMultipleChoiceSearchableWidget(SBAdminBaseWidget, forms.SelectMultiple):
+    """Multi-choice dropdown with client-side search (Choices.js).
+
+    Same UI shell as ``SBAdminChoiceSearchableWidget`` but renders a
+    ``<select multiple>`` and pairs with ``MultipleChoiceField``.
+    """
+
+    template_name = "sb_admin/widgets/choice_search.html"
+
+    def __init__(self, form_field=None, attrs=None, choices=(), full_width=False):
+        self.full_width = full_width
+        super().__init__(
+            form_field, attrs={"class": "input", **(attrs or {})}, choices=choices
+        )
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"]["full_width"] = self.full_width
+        return context
+
+
 class SBAdminNullBooleanSelectWidget(SBAdminBaseWidget, forms.NullBooleanSelect):
     template_name = "sb_admin/widgets/select.html"
     option_template_name = "sb_admin/widgets/select_option.html"
@@ -451,6 +495,7 @@ class SBAdminAutocompleteWidget(
     default_create_data = None
     forward_to_create = None
     reload_on_save = None
+    full_width = False
     REQUEST_CREATED_DATA_KEY = "autocomplete_created_data"
 
     def __init__(self, form_field=None, *args, **kwargs):
@@ -459,6 +504,7 @@ def __init__(self, form_field=None, *args, **kwargs):
         self.allow_add = kwargs.pop("allow_add", None)
         self.create_value_field = kwargs.pop("create_value_field", None)
         self.forward_to_create = kwargs.pop("forward_to_create", [])
+        self.full_width = kwargs.pop("full_width", self.full_width)
         super().__init__(form_field, *args, **kwargs)
         self.attrs = {} if attrs is None else attrs.copy()
         if self.multiselect and self.allow_add:

src/django_smartbase_admin/admin/widgets.py

@@ -150,4 +150,3 @@
         @apply text-dark m-0 p-0;
     }
 }
-

src/django_smartbase_admin/static/sb_admin/src/css/_choices.css

@@ -1,5 +1,5 @@
 import Choices from "choices.js"
-import {createIcon, filterInputValueChangedUtil} from "./utils"
+import {createIcon, filterInputValueChangedUtil, syncDropdownMenuWidth} from "./utils"
 import {choicesJSListeners, choicesJSOptions} from "./choices"
 import debounce from "lodash/debounce"
 
@@ -138,6 +138,7 @@ export default class Autocomplete {
             wrapperElButton.addEventListener('shown.bs.dropdown', () => {
                 choicesJS.input.element.focus()
             })
+            syncDropdownMenuWidth(wrapperEl, wrapperElButton)
         } else {
             choicesJS.input.element.addEventListener('focus', initLoad)
         }

src/django_smartbase_admin/static/sb_admin/src/js/autocomplete.js

@@ -27,6 +27,7 @@ import Datepicker from "./datepicker"
 import Range from "./range"
 import Sorting from "./sorting"
 import Autocomplete from "./autocomplete"
+import StaticAutocomplete from "./static_autocomplete"
 import ChoicesJS from "./choices"
 import TextTags from "./text_tags"
 import {setCookie, setDropdownLabel} from "./utils"
@@ -73,6 +74,7 @@ class Main {
                 this.initDropdowns(detail.target)
                 this.initInputs(detail.target)
                 this.autocomplete.handleDynamiclyAddedAutocomplete(detail.target)
+                this.staticAutocomplete.handleDynamicallyAdded(detail.target)
                 this.textTags.handleDynamicallyAddedTextTags(detail.target)
                 this.initInlines(detail.target)
                 this.initTooltips(detail.target)
@@ -90,8 +92,9 @@ class Main {
         this.initInputs()
         new Sorting()
         this.autocomplete = new Autocomplete()
+        this.staticAutocomplete = new StaticAutocomplete()
         this.textTags = new TextTags()
-        new ChoicesJS()
+        this.choicesJS = new ChoicesJS()
         document.addEventListener('click', (e) => {
             this.closeAlert(e)
             this.selectAll(e)

src/django_smartbase_admin/static/sb_admin/src/js/main.js

@@ -0,0 +1,88 @@
+import Choices from "choices.js"
+import {choicesJSOptions} from "./choices"
+import {createIcon, getResultLabel, syncDropdownMenuWidth} from "./utils"
+
+// Shares the autocomplete UI shell (dropdown button + Choices.js wrapped
+// <select>) but uses a static list of <option> tags rendered server-side —
+// no API fetch, no pagination, no add-new, no hidden JSON input. The <select>
+// submits natively, so Django's default MultipleChoiceField/ChoiceField
+// value_from_datadict handles the POST with no custom widget parsing.
+export default class StaticAutocomplete {
+    constructor() {
+        this.handleDynamicallyAdded(document)
+        document.addEventListener('formset:added', (event) => {
+            this.handleDynamicallyAdded(event.target)
+        })
+    }
+
+    handleDynamicallyAdded(root) {
+        root.querySelectorAll('.js-static-autocomplete').forEach((choiceInput) => {
+            this.init(choiceInput)
+        })
+    }
+
+    init(choiceInput) {
+        if (choiceInput.closest('.choices')) return
+        const wrapperEl = document.getElementById(`${choiceInput.id}-wrapper`)
+        if (!wrapperEl) return
+        const wrapperElButton = wrapperEl.querySelector('button[data-bs-toggle="dropdown"]')
+        const deleteButton = wrapperEl.querySelector('.js-clear-autocomplete')
+        const labelEl = document.getElementById(`${choiceInput.id}-value`)
+        const emptyLabel = labelEl ? labelEl.textContent.trim() : ''
+
+        const choicesJS = new Choices(choiceInput, {
+            ...choicesJSOptions(choiceInput),
+            placeholderValue: window.sb_admin_translation_strings?.["search"] || 'Search',
+            searchPlaceholderValue: window.sb_admin_translation_strings?.["search"] || 'Search',
+            noResultsText: window.sb_admin_translation_strings?.["no_results"] || 'No results found',
+            noChoicesText: window.sb_admin_translation_strings?.["no_choices"] || 'No choices to choose from',
+            searchEnabled: true,
+            searchChoices: true,
+            searchResultLimit: 999,
+            // Default renderSelectedChoices ('auto'): selected items leave the
+            // dropdown and show as removable pills above it — matches dynamic
+            // multi-select autocomplete behavior.
+            callbackOnInit: () => {
+                const label = document.createElement('label')
+                label.appendChild(createIcon('Find', []))
+                choiceInput.parentElement.appendChild(label)
+            },
+        })
+
+        const updateLabel = () => {
+            if (!labelEl) return
+            const value = choicesJS.getValue()
+            const items = Array.isArray(value) ? value : (value ? [value] : [])
+            labelEl.innerHTML = items.length === 0 ? emptyLabel : getResultLabel(items)
+        }
+        choiceInput.addEventListener('addItem', updateLabel)
+        choiceInput.addEventListener('removeItem', updateLabel)
+        updateLabel()
+
+        if (!choiceInput.hasAttribute('multiple')) {
+            // Single-select: close the dropdown after picking.
+            choiceInput.addEventListener('change', () => {
+                if (wrapperElButton) wrapperElButton.click()
+            })
+        }
+
+        if (wrapperElButton) {
+            wrapperElButton.addEventListener('shown.bs.dropdown', () => {
+                choicesJS.input.element.focus()
+            })
+            syncDropdownMenuWidth(wrapperEl, wrapperElButton)
+        }
+
+        if (deleteButton) {
+            deleteButton.addEventListener('click', () => {
+                choicesJS.removeActiveItems(null)
+                updateLabel()
+            })
+        }
+
+        // Render with the search input visible immediately — the whole point
+        // of the static widget is its client-side search.
+        choicesJS.containerOuter.element.classList.add('search-on')
+        choicesJS.input.element.focus()
+    }
+}

src/django_smartbase_admin/static/sb_admin/src/js/static_autocomplete.js

@@ -71,7 +71,7 @@ export const filterInputValueChangeListener = (inputSelector, callbackFunction)
     })
 }
 
-const getResultLabel = (valueOrObject, separator=', ') => {
+export const getResultLabel = (valueOrObject, separator=', ') => {
     const labelArray = []
     const entries = Object.values(valueOrObject)
     let hasMaxEntries = false
@@ -117,6 +117,24 @@ export const setDropdownLabel = (dropdownMenuEl, dropdownLabelEl) => {
     dropdownLabelEl.innerHTML = getResultLabel(fields)
 }
 
+export const syncDropdownMenuWidth = (wrapperEl, wrapperElButton) => {
+    // Wrapper opts in via data-autocomplete-full-width="true": the dropdown
+    // menu is resized to match the wrapper (and kept in sync on resize while
+    // it's open). Used by both the dynamic autocomplete and the static
+    // Choices.js dropdowns.
+    if (wrapperEl.dataset.autocompleteFullWidth !== 'true') return
+    const menuEl = wrapperEl.querySelector('.dropdown-menu')
+    if (!menuEl) return
+    const syncMenuWidth = () => {
+        menuEl.style.width = `${wrapperEl.offsetWidth}px`
+    }
+    wrapperElButton.addEventListener('show.bs.dropdown', syncMenuWidth)
+    wrapperElButton.addEventListener('shown.bs.dropdown', syncMenuWidth)
+    window.addEventListener('resize', () => {
+        if (menuEl.classList.contains('show')) syncMenuWidth()
+    })
+}
+
 export const filterInputValueChangedUtil = (field) => {
     const filterId = field.dataset.filterId || field.id
     const separator = field.dataset.labelSeparator || ', '

src/django_smartbase_admin/static/sb_admin/src/js/utils.js

@@ -2,7 +2,9 @@
 {% with autocomplete_data_id=filter_widget.view_id|add:"-"|add:filter_widget.input_id|add:"_data" %}
     <div class="relative">
         {% include 'sb_admin/widgets/includes/field_label.html' %}
-        <div id="{{ widget.attrs.id }}-wrapper" class="relative flex items-center max-w-full overflow-hidden{% if widget.attrs.related_edit_url or widget.attrs.related_add_url %} gap-4{% endif %}">
+        <div id="{{ widget.attrs.id }}-wrapper"
+             {% if filter_widget.full_width %}data-autocomplete-full-width="true"{% endif %}
+             class="relative flex items-center max-w-full overflow-hidden{% if widget.attrs.related_edit_url or widget.attrs.related_add_url %} gap-4{% endif %}">
             <button
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
@@ -18,7 +20,7 @@
                 {% endblock %}
             </button>
             {% include 'sb_admin/widgets/includes/related_item_buttons.html' %}
-            <div class="dropdown-menu max-h-none w-248">
+            <div class="dropdown-menu max-h-none{% if filter_widget.full_width %} w-auto{% else %} w-248{% endif %}">
                 <div class="px-12 pt-8">
                     {% include 'sb_admin/widgets/input.html' %}
                     <select {% if filter_widget.multiselect %}multiple{% endif %} class="js-autocomplete"

src/django_smartbase_admin/templates/sb_admin/widgets/autocomplete.html

@@ -0,0 +1,46 @@
+{% load i18n %}
+<div class="relative">
+    {% include 'sb_admin/widgets/includes/field_label.html' %}
+    <div id="{{ widget.attrs.id }}-wrapper"
+         {% if widget.full_width %}data-autocomplete-full-width="true"{% endif %}
+         class="relative flex items-center max-w-full overflow-hidden">
+        <button
+                type="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+                data-bs-offset="[0, 8]"
+                data-bs-config='{"popperConfig":{"strategy":"fixed"}}'
+                class="autocomplete-button btn px-10 font-normal flex-1 min-w-0"
+        >
+            <span id="{{ widget.attrs.id }}-value">{% trans 'Select' %}</span>
+            <svg class="ml-8">
+                <use xlink:href="#Down"></use>
+            </svg>
+        </button>
+        <div class="dropdown-menu max-h-none{% if widget.full_width %} w-auto{% else %} w-248{% endif %}">
+            <div class="px-12 pt-8">
+                <select {% if widget.attrs.multiple %}multiple{% endif %}
+                        id="{{ widget.attrs.id }}"
+                        name="{{ widget.name }}"
+                        class="js-static-autocomplete">
+                    {% for group, options, index in widget.optgroups %}
+                        {% for option in options %}
+                            <option value="{{ option.value|stringformat:'s' }}"{% if option.selected %} selected{% endif %}>{{ option.label }}</option>
+                        {% endfor %}
+                    {% endfor %}
+                </select>
+            </div>
+            {% if widget.form_field.required %}
+                <div class="pb-8"></div>
+            {% else %}
+                <div class="relative px-12 py-8 flex">
+                    <button type="button"
+                            class="text-primary js-clear-autocomplete">
+                        {% trans 'Clear' %}
+                    </button>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% include 'sb_admin/widgets/includes/help_text.html' %}