fixes to select-search

basxsoftwareassociation · Oct 10, 2023 · 9206aea · 9206aea
1 parent 0ea26a3
commit 9206aea
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 117 deletions.
diff --git a/basxbread/layout/components/forms/widgets.py b/basxbread/layout/components/forms/widgets.py
@@ -317,119 +317,6 @@ def __init__(
         )
 
 
-class Select1(BaseWidget):
-    # django_widget = widgets.Select
-    carbon_input_class = "bx--select-input"
-
-    def __init__(
-        self,
-        label=None,
-        help_text=None,
-        errors=None,
-        inputelement_attrs=None,
-        boundfield=None,
-        inline=False,
-        choices=None,  # for non-django-form select elements use this
-        **attributes,
-    ):
-        inputelement_attrs = inputelement_attrs or {}
-        select_wrapper = hg.DIV(
-            hg.SELECT(
-                hg.Iterator(
-                    _optgroups_from_choices(
-                        choices,
-                        name=inputelement_attrs.get("name"),
-                        value=inputelement_attrs.get("value"),
-                    )
-                    if choices
-                    else _gen_optgroup(boundfield),
-                    "optgroup",
-                    hg.If(
-                        hg.C("optgroup.0"),
-                        hg.OPTGROUP(
-                            hg.Iterator(
-                                hg.C("optgroup.1"),
-                                "option",
-                                hg.OPTION(
-                                    hg.C("option.label"),
-                                    _class="bx--select-option",
-                                    value=hg.C("option.value"),
-                                    lazy_attributes=hg.C("option.attrs"),
-                                ),
-                            ),
-                            _class="bx--select-optgroup",
-                            label=hg.C("optgroup.0"),
-                        ),
-                        hg.Iterator(
-                            hg.C("optgroup.1"),
-                            "option",
-                            hg.OPTION(
-                                hg.C("option.label"),
-                                _class="bx--select-option",
-                                value=hg.C("option.value"),
-                                lazy_attributes=hg.C("option.attrs"),
-                            ),
-                        ),
-                    ),
-                ),
-                lazy_attributes=_append_classes(
-                    inputelement_attrs,
-                    self.carbon_input_class,
-                    hg.If(
-                        getattr(errors, "condition", None),
-                        self.carbon_input_error_class,
-                    ),
-                ),
-            ),
-            Icon(
-                "chevron--down",
-                size=16,
-                _class="bx--select__arrow",
-                aria_hidden="true",
-            ),
-            hg.If(
-                getattr(errors, "condition", None),
-                Icon(
-                    "warning--filled",
-                    size=16,
-                    _class="bx--select__invalid-icon",
-                ),
-            ),
-            _class="bx--select-input__wrapper",
-            data_invalid=hg.If(getattr(errors, "condition", None), True),
-        )
-        super().__init__(
-            label,
-            hg.If(
-                inline,
-                hg.DIV(
-                    select_wrapper,
-                    errors,
-                    _class="bx--select-input--inline__wrapper",
-                ),
-                select_wrapper,
-            ),
-            help_text,
-            hg.If(inline, None, errors),  # not displayed if this is inline
-            **hg.merge_html_attrs(
-                attributes,
-                {
-                    "_class": hg.BaseElement(
-                        "bx--select",
-                        hg.If(inline, " bx--select--inline"),
-                        hg.If(
-                            getattr(errors, "condition", None), " bx--select--invalid"
-                        ),
-                        hg.If(
-                            inputelement_attrs.get("disabled"),
-                            " bx--select--disabled",
-                        ),
-                    ),
-                },
-            ),
-        )
-
-
 class Select(BaseWidget):
     django_widget = widgets.Select
     carbon_input_class = "bx--select-input"
@@ -469,17 +356,17 @@ def __init__(
             ),
             hg.INPUT(
                 _class="bx--select-input hidden",
-                style="width: 100%; max-width: 100%",
+                style="",
                 placeholder=_("Type to search"),
                 onkeyup="""
 let searchInputs = event.target.value.toLowerCase().split(' ').filter((term) => term.length > 0)
+let resultsElem = this.nextElementSibling
+resultsElem.innerHTML = ''
 if(searchInputs.length == 0 || searchInputs.findIndex((term) => term.length >= 2) == -1) {
     return
 }
 let searchElem = this
-let resultsElem = this.nextElementSibling
 let selectElem = this.nextElementSibling.nextElementSibling;
-resultsElem.innerHTML = ''
 for(let opt of selectElem.childNodes) {
     let content = opt.innerHTML.toLowerCase()
     if(searchInputs.findIndex((term) => content.includes(term)) != -1) {

diff --git a/basxbread/static/css/basxbread-main.css b/basxbread/static/css/basxbread-main.css
@@ -15308,6 +15308,9 @@ td .bx--modal .bx--form-item {
     .bx--col .bx--form-item .bx--select .bx--select-input__wrapper select {
       width: 100%;
       max-width: 100%; }
+    .bx--col .bx--form-item .bx--select .bx--select-input__wrapper input {
+      width: 100%;
+      max-width: 100%; }
 
 .bx--col .bx--form-item .bx--toggle-input {
   width: 1px; }

diff --git a/basxbread/static/css/basxbread-main.min.css b/basxbread/static/css/basxbread-main.min.css
diff --git a/basxbread/static/design/carbon_design/scss/styles.scss b/basxbread/static/design/carbon_design/scss/styles.scss
@@ -102,6 +102,10 @@ td {
         width: 100%;
         max-width: 100%;
       }
+      input {
+        width: 100%;
+        max-width: 100%;
+      }
     }
   }
   .bx--toggle-input {