jb-select 6.5.0 → 7.0.1

package/lib/jb-select.css

@@ -1,151 +1,61 @@
 /* @use "~jb-core/styles/medias.scss" as *; */
 
 @custom-media --tablet-until (max-width: 768px);
+@custom-media --tablet-from (min-width: 769px);
 
 .jb-select-web-component {
     width: var(--jb-select-width, 100%);
     margin: var(--jb-select-margin, 0 0);
-    position: relative;
     box-sizing: border-box;
 
-    &.--focused {
-        @media(--tablet-until) {
-            position: fixed;
-            bottom: 0;
-            top: initial;
-            left: 0;
-            background-color: var(--overlay-bg-color);
-            width: 100vw;
-            height: var(--mobile-modal-height);
-            border-radius: var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;
-            margin: 0;
-            padding: 16px 8px;
-            z-index: var(--mobile-modal-z-index);
-        }
-
-        .select-box {
-            @media(--tablet-until) {
-                height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
-                background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
-                border-width: var(--jb-select-mobile-search-border-width, var(--border-width));
-                border-color: var(--jb-select-mobile-search-border-color, var(--border-color));
-                border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--border-bottom-width));
-                border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--border-color)));
-                border-radius: var(--jb-select-mobile-search-border-radius, var(--border-radius));
-            }
-
-            .front-box {
-                .arrow-icon {
-                    @media(--tablet-until) {
-                        display: none;
-                    }
-                }
-            }
-
-            .selected-value-wrapper {
-                @media(--tablet-until) {
-                    opacity: 0;
-                    transition: none;
-                }
-
-                .selected-value {}
-            }
-        }
-
-        .middle-divider {
-            display: block;
-
-            @media(--tablet-until) {
-                margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0);
-            }
-        }
-
-        .select-list-wrapper {
-            @media(--tablet-until) {
-                position: initial;
-                margin: var(--jb-select-mobile-item-list-margin, 16px 0);
-                border-radius: var(--jb-select-mobile-item-list-border-radius, var(--border-radius));
-            }
-        }
-
-        .label-wrapper {
-            @media(--tablet-until) {
-                display: flex;
-            }
-
-            label {
-                @media(--tablet-until) {
-                    color: var(--modal-label-color);
-                    font-size: 1.5em;
-                    display: flex;
-                    align-items: center;
-                }
-            }
-
-            .close-button {
-                display: none;
-
-                @media(--tablet-until) {
-                    display: flex;
-                    width: 48px;
-                    height: 48px;
-                    justify-content: center;
-                    align-items: center;
-                    color: var(--modal-close-color);
-
-                    .close-btn-svg-bg {
-                        opacity: var(--jb-select-close-bg-opacity, 0.4);
-                        fill: var(--close-bg-color);
-                    }
-
-                    .close-btn-svg-path {
-                        fill: var(--modal-close-color);
-                    }
-                }
-            }
-        }
-    }
-
     &.--has-value {
 
-        /*if user select a option and value is setted and not null*/
+        /*if user select a option and value is set and not null*/
         .select-box {
             border-color: var(--jb-select-border-color-selected, var(--border-color));
             background-color: var(--jb-select-bgcolor-selected, var(--select-box-bg-color));
-            @media(--tablet-until) {
-                &:focus-within {
-                    background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
-                }
-            }
+        }
+
+        .select-box .end-section .clear-button {
+            display: block;
         }
     }
 
     .label-wrapper {
         label {
+
+
             width: 100%;
-            margin: 4px 0px;
+            margin: var(--label-margin);
             display: block;
-            font-size: var(--jb-select-label-font-size, 0.8em);
-            font-weight: var(--jb-select-label-font-weight, normal);
+            font-size: var(--label-font-size);
             color: var(--label-color);
+            
+            font-weight: var(--jb-input-label-font-weight, 300);
 
             &.--hide {
                 display: none;
             }
         }
+    }
 
-        .close-button {
-            display: none;
+    &:focus-within .select-box {
+
+        @media(--tablet-from) {
+            /*when there is focus on whole select means menu is open so we change select styles*/
+            border-color: var(--border-color);
+            border-bottom-color: transparent;
+            border-radius: var(--rounded) var(--rounded) 0 0;
         }
     }
 
     .select-box {
         width: 100%;
         box-sizing: border-box;
-        height: var(--jb-select-height, 2.5rem);
+        height: var(--height);
         border: solid var(--border-width) var(--border-color);
         border-bottom: solid var(--border-bottom-width) var(--border-color);
-        border-radius: var(--border-radius);
+        border-radius: var(--box-border-radius);
         background-color: var(--select-box-bg-color);
         margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);
         overflow: hidden;
@@ -154,16 +64,6 @@
         gap: 0.5rem;
         align-items: center;
 
-        &:focus-within {
-            border-color: var(--jb-select-border-color, var(--border-color));
-            border-bottom-color: var(--jb-select-border-color, var(--border-color));
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-
-            @media(--tablet-until) {
-                border-radius: var(--jb-select-mobile-search-border-radius, var(--border-radius));
-            }
-        }
-
         .start-section {
             height: 100%;
             width: auto;
@@ -219,17 +119,11 @@
                 overflow: hidden;
                 z-index: 2;
 
-                input {
-                    border: none;
-                    width: 100%;
-                    box-sizing: border-box;
+                .search-input {
                     height: 100%;
                     background-color: transparent;
                     padding: 2px 12px 0 12px;
                     display: block;
-                    font-family: inherit;
-                    font-size: var(--jb-select-value-font-size, 1.1rem);
-                    color: var(--value-color);
                     margin: 0;
                     border-radius: 0;
 
@@ -246,9 +140,20 @@
         }
 
         .end-section {
+            display: flex;
+            gap: 1.5rem;
+            align-items: center;
+
             .arrow-icon {
                 margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);
             }
+
+            .clear-button {
+                /*show when there is value*/
+                display: none;
+                --jb-button-padding-xs: 0;
+                --jb-button-height-xs: 1rem;
+            }
         }
 
 
@@ -260,92 +165,114 @@
 
     }
 
-    .middle-divider {
-        display: none;
-        position: relative;
-        z-index: calc(var(--base-z-index) + 3);
-        width: 100%;
-        height: var(--middle-div-height);
-        background-color: var(--jb-select-middle-div-color, var(--border-color));
-        margin: var(--jb-select-middle-div-margin, calc(-1 * var(--border-bottom-width)) 0);
-        border-radius: var(--jb-select-middle-div-radius, 0px);
-    }
-
     .message-box {
-        font-size: var(--jb-select-message-font-size, 0.7em);
-        font-weight: var(--jb-select-message-font-weight, normal);
-        padding: 4px 8px;
+        font-size: var(--message-font-size);
+        padding: 0.125rem var(--inline-space);
         color: var(--message-color);
-
+        display: var(--jb-select-message-box-display, block);
         &:empty {
             padding: 0;
         }
-
-        &.--error {
-            color: red;
-        }
     }
 
-    .select-list-wrapper {
-        display: none;
-        position: absolute;
-        margin: calc(-1 * var(--border-bottom-width)) 0;
-        height: auto;
-        overflow: hidden;
-        width: 100%;
-        background-color: var(--select-box-bg-color);
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
-        border: solid var(--jb-select-list-border-width, 1px) var(--border-color);
-        border-top: none;
-        border-bottom: solid var(--border-bottom-width) var(--border-color);
-        box-shadow: var(--jb-select-list-box-shadow);
-        box-sizing: border-box;
-        z-index: calc(var(--base-z-index) + 2);
+    .popover-wrapper {
+        position: relative;
 
-        &.--show {
-            display: block;
-        }
+        .select-list-wrapper {
+            @media(--tablet-from) {
+                width: 100%;
+                --jb-popover-border-radius: var(--list-border-radius);
+                --jb-popover-bg-color: var(--select-box-bg-color);
+                --jb-popover-top: 0;
+            }
 
-        .select-list {
-            width: 100%;
-            max-height: var(--jb-select-list-max-height, 400px);
-            overflow-y: auto;
-            slot {
-                padding: var(--jb-select-list-padding, 16px 0);
-                &:empty {
-                    padding: 0;
+            &::part(content) {
+
+                @media(--tablet-from) {
+                    /*in desktop*/
+                    border: solid var(--border-width) var(--border-color);
+                    border-bottom: solid var(--border-bottom-width) var(--border-color);
+                    border-top: none;
                 }
             }
 
+            .mobile-search-input-wrapper {
+                display: none;
+
+                @media(--tablet-until) {
+                    display: block;
+                    margin-block-end: 1rem;
+                    margin-inline: 0.75rem;
+
+                    .search-input {
+                        background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
+                        border-radius: var(--box-border-radius);
+                        width: 100%;
+                        height: var(--height);
+                    }
+                }
 
-            @media(--tablet-until) {
-                max-height: calc(var(--mobile-modal-height) - 15rem);
             }
 
-            /* option style places */
 
-            &::-webkit-scrollbar {
-                width: 9px;
-                background-color: transparent;
-            }
+            .select-list {
+                width: 100%;
+                max-height: var(--jb-select-list-max-height, 400px);
+                overflow-y: auto;
+
+                slot {
+                    padding: var(--jb-select-list-padding, 16px 0);
+
+                    &:empty {
+                        padding: 0;
+                    }
+                }
+
+                /* option style places */
 
-            &::-webkit-scrollbar-thumb {
-                background-color: var(--list-scroll-color);
-                border-radius: var(--jb-select-list-scroll-border-radius, 4px);
+                &::-webkit-scrollbar {
+                    width: 9px;
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background-color: var(--list-scroll-color);
+                    border-radius: var(--jb-select-list-scroll-border-radius, 4px);
+                }
             }
-        }
 
-        .empty-list-placeholder {
-            display: none;
-            text-align: center;
-            color: var(--empty-list-placeholder-color);
-            font-style: italic;
-            padding: 8px 0;
+            .empty-list-placeholder {
+                display: none;
+                text-align: center;
+                color: var(--empty-list-placeholder-color);
+                font-style: italic;
+                padding: 8px 0;
 
-            &.--show {
-                display: block;
+                &.--show {
+                    display: block;
+                }
             }
+
         }
+    }
 
+    .search-input {
+        border: none;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 2px 12px 0 12px;
+        display: block;
+        font-family: inherit;
+        font-size: var(--jb-select-value-font-size, 1.1rem);
+        color: var(--value-color);
+
+        &:focus {
+            outline: none;
+        }
+
+        &::placeholder {
+            color: var(--placeholder-color);
+            font-size: var(--jb-select-placeholder-font-size, 1.1em);
+        }
     }
 }

package/lib/jb-select.ts

@@ -1,25 +1,31 @@
+import "jb-button";
+import "jb-popover";
 import CSS from "./jb-select.css";
 import VariablesCSS from "./variables.css";
-import {
+import type {
   JBSelectCallbacks,
   JBSelectElements,
   ValidationValue,
 } from "./types";
-import { ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
+import { type ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
 import { isMobile } from "jb-core";
-import { JBFormInputStandards } from 'jb-form';
+import type { JBFormInputStandards } from 'jb-form';
 // eslint-disable-next-line no-duplicate-imports
 import { JBOptionWebComponent } from "./jb-option/jb-option";
 import { registerDefaultVariables } from 'jb-core/theme';
 import { renderHTML } from "./render";
 import { dictionary } from "./i18n";
 import { i18n } from "jb-core/i18n";
+import type { JBButtonWebComponent } from "jb-button";
 
+//TODO: add clean button to empty the select box after value selection
 //TODO: add IncludeInputInList or freeSolo so user can select item that he wrote without even it exist in select list
 //TODO: handleHomeEndKeys to move focus inside the popup with the Home and End keys.
 /**
  *  TValue is the type of value we extract from option
  */
+
+// biome-ignore lint/suspicious/noExplicitAny: <we support any type of value and there is no limitation on value type>
 export class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
   static get formAssociated() {
     return true;
@@ -124,7 +130,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   #required = false;
   set required(value: boolean) {
     this.#required = value;
-    this.#internals.ariaRequired = value?"true":"false";
+    this.#internals.ariaRequired = value ? "true" : "false";
     this.#validation.checkValiditySync({ showError: false });
   }
   get required() {
@@ -150,6 +156,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     if (typeof this.attachInternals == "function") {
       //some browser dont support attachInternals
       this.#internals = this.attachInternals();
+      this.#internals.role = "combobox"
     }
     this.#initWebComponent();
     this.#initProp();
@@ -173,29 +180,45 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       delegatesFocus: true,
     });
     registerDefaultVariables();
-    const html = `<style>${CSS} ${VariablesCSS}</style>` + "\n" + renderHTML();
+    const html = `<style>${CSS} ${VariablesCSS}</style>\n${renderHTML()}`;
     const element = document.createElement("template");
     element.innerHTML = html;
     shadowRoot.appendChild(element.content.cloneNode(true));
     this.elements = {
-      input: shadowRoot.querySelector(".select-box input")!,
+      input: shadowRoot.querySelector(".search-input")!,
       componentWrapper: shadowRoot.querySelector(".jb-select-web-component")!,
-      selectedValueWrapper: shadowRoot.querySelector(
-        ".selected-value-wrapper"
-      )!,
+      selectedValueWrapper: shadowRoot.querySelector(".selected-value-wrapper")!,
       messageBox: shadowRoot.querySelector(".message-box")!,
       optionList: shadowRoot.querySelector(".select-list")!,
       optionListWrapper: shadowRoot.querySelector(".select-list-wrapper")!,
       optionListSlot: shadowRoot.querySelector(".select-list-wrapper .select-list slot")!,
       arrowIcon: shadowRoot.querySelector(".arrow-icon")!,
+      clearButton: shadowRoot.querySelector(".clear-button") as JBButtonWebComponent,
       label: {
         wrapper: shadowRoot.querySelector("label")!,
         text: shadowRoot.querySelector("label .label-value")!,
       },
       emptyListPlaceholder: shadowRoot.querySelector(".empty-list-placeholder")!,
+      mobileSearchInputWrapper: shadowRoot.querySelector(".mobile-search-input-wrapper"),
+      frontBox: shadowRoot.querySelector(".front-box"),
     };
     this.#registerEventListener();
     this.#updateListEmptyPlaceholder();
+    this.#setupDeviceRelates();
+  }
+  /**
+   * place code that change on select resize between mobile & desktop
+   */
+  #setupDeviceRelates() {
+    const onResize = ()=> {
+      if (isMobile()) {
+        this.elements.mobileSearchInputWrapper.appendChild(this.elements.input)
+      } else {
+        this.elements.frontBox.appendChild(this.elements.input);
+      }
+    }
+    addEventListener("resize", onResize);
+    onResize();
   }
   #registerEventListener() {
     this.elements.input.addEventListener("change", (e: Event) => {
@@ -205,9 +228,10 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     this.elements.input.addEventListener("keyup", this.#onInputKeyup.bind(this));
     this.elements.input.addEventListener("beforeinput", this.#onInputBeforeInput.bind(this));
     this.elements.input.addEventListener("input", (e) => { this.#onInputInput(e as unknown as InputEvent); });
-    this.elements.input.addEventListener("focus", this.#onInputFocus.bind(this));
+    this.addEventListener("focus", this.#onSelectFocus.bind(this));
     this.elements.input.addEventListener("blur", this.#onInputBlur.bind(this));
     this.elements.arrowIcon.addEventListener("click", this.#onArrowKeyClick.bind(this));
+    this.elements.clearButton.addEventListener("click", this.#onClearButtonClick.bind(this));
     //events to work with options
     this.addEventListener("select", this.#onOptionSelect.bind(this));
     this.addEventListener("jb-option-connected", this.#onOptionConnected.bind(this));
@@ -230,7 +254,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       "error",
     ];
   }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+  attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
     // do something when an attribute has changed
     this.#onAttributeChange(name, newValue);
   }
@@ -288,12 +312,12 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   #setValueOnOptionListChanged() {
     //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.
-    //in some scenario value is setted before optionList attached so we store it on this.#notFoundedValue and after option list setted we set value from this.#notFoundedValue
+    //in some scenario value is set before optionList attached so we store it on this.#notFoundedValue and after option list set we set value from this.#notFoundedValue
     if (this.#notFoundedValue) {
       //if select has no prev value or pending not found value we don't set it because user may input some search terms in input box and developer-user update list base on that value
       //if we set it to null the search term and this.textValue will become null and empty too and it make impossible for user to search in dynamic back-end provided searchable list so we put this condition to prevent it
-      const isSetted = this.#setValueFromOutside(this.#notFoundedValue);
-      if (isSetted) {
+      const isSet = this.#setValueFromOutside(this.#notFoundedValue);
+      if (isSet) {
         //after list update and when not founded value is found in new option list we clear old not founded value
         this.#notFoundedValue = null;
       }
@@ -324,7 +348,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   //null option mean deselect all
   #changeSelectedOption(option: JBOptionWebComponent<TValue> | null) {
-    this.#optionList.forEach((x) => x.selected = false);
+    this.#optionList.forEach((x) => { x.selected = false });
     if (option) {
       option.selected = true;
       this.#selectedOption = option;
@@ -363,6 +387,13 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       this.focus();
     }
   }
+  #onClearButtonClick(e:MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.#setValue(null,null);
+    this.#checkValidity(true);
+    this.#dispatchOnChangeEvent();
+  }
   #onInputKeyPress(e: KeyboardEvent) {
     const eventOptions: KeyboardEventInit = {
       altKey: e.altKey,
@@ -383,7 +414,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     const event = new KeyboardEvent("keypress", eventOptions);
     this.dispatchEvent(event);
   }
-  #onInputBeforeInput(e: InputEvent) {
+  #onInputBeforeInput(_e: InputEvent) {
     // const inputtedText = e.data || "";
     //TODO: add cancelable event dispatch here
   }
@@ -453,6 +484,9 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     //here is the rare  time we update _text_value directly because we want trigger event that may read value directly from dom
     this.#textValue = inputText;
   }
+  #onSelectFocus() {
+    this.focus();
+  }
   #onInputFocus() {
     this.focus();
   }
@@ -470,13 +504,14 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   focus() {
     this.elements.input.focus();
     this.#showOptionList();
-    this.elements.componentWrapper.classList.add("--focused");
+    this.elements.optionListWrapper.open();
     if (this.isMobileDevice) {
       this.elements.input.placeholder = this.#searchPlaceholder;
     }
   }
   blur() {
-    this.elements.componentWrapper.classList.remove("--focused");
+    // this.elements.componentWrapper.classList.remove("--focused");
+    this.elements.optionListWrapper.close();
     this.textValue = "";
     this.#handleSelectedValueDisplay("");
     this.#hideOptionList();
@@ -599,7 +634,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     }
     if (this.required) {
       const label = this.getAttribute("label") || "";
-      const message = dictionary.get(i18n,"requireMessage")(label || null);
+      const message = dictionary.get(i18n, "requireMessage")(label || null);
       validationList.push({
         validator: ({ value }) => {
           return value !== null && value !== undefined;

package/lib/render.ts

@@ -1,18 +1,8 @@
 export function renderHTML(): string {
-  return /* html */ `
+    return /* html */ `
   <div class="jb-select-web-component">
     <div class="label-wrapper">
         <label class="--hide"><span class="label-value"></span></label>
-        <!-- close button will be visible on mobile modal -->
-        <div class="close-button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-                <path class="close-btn-svg-bg" opacity="0.4"
-                    d="M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z" />
-                <path class="close-btn-svg-path"
-                    d="M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z"
-                    fill="#200E32" />
-            </svg>
-        </div>
     </div>
     <div class="select-box">
         <div class="start-section">
@@ -21,11 +11,16 @@ export function renderHTML(): string {
         <div class="middle-section">
             <div class="selected-value-wrapper"></div>
             <div class="front-box">
-                <input class="input" />
-
+                <input class="search-input" />
             </div>
         </div>
         <div class="end-section">
+        <jb-button class="clear-button" color="dark" variant="ghost" size="xs">
+            <svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2.11183 24C1.57504 24 1.03826 23.8023 0.614479 23.3786C-0.204826 22.5596 -0.204826 21.2039 0.614479 20.3848L20.3908 0.614298C21.2101 -0.204766 22.5662 -0.204766 23.3855 0.614298C24.2048 1.43336 24.2048 2.78905 23.3855 3.60811L3.60918 23.3786C3.1854 23.8023 2.64861 24 2.11183 24Z" fill="currentColor"/>
+                <path d="M21.8882 24C21.3514 24 20.8146 23.8023 20.3908 23.3786L0.614479 3.60811C-0.204826 2.78905 -0.204826 1.43336 0.614479 0.614298C1.43378 -0.204766 2.78987 -0.204766 3.60918 0.614298L23.3855 20.3848C24.2048 21.2039 24.2048 22.5596 23.3855 23.3786C22.9617 23.8023 22.425 24 21.8882 24Z" fill="currentColor"/>
+            </svg>
+        </jb-button>
             <div class="arrow-icon" tabindex="-1">
                 <slot name="select-arrow-icon">
                     <svg width='8' height='8' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1'
@@ -37,16 +32,18 @@ export function renderHTML(): string {
             </div>
         </div>
     </div>
-    <div class="middle-divider">
-        <!-- middle line between input box and list (hidden by default but user may need it sometimes) -->
-    </div>
-    <div class="select-list-wrapper">
-        <div class="select-list" tabindex="-1">
-            <slot></slot>
-        </div>
-        <div class="empty-list-placeholder">
-            <slot name="empty-list-message">no item available</slot>
-        </div>
+    <div class="popover-wrapper">
+        <jb-popover class="select-list-wrapper">
+            <div class="mobile-search-input-wrapper">
+            <!-- Here we put search input in Mobile -->
+            </div>
+            <div class="select-list" tabindex="-1" role="listbox">
+                <slot></slot>
+            </div>
+            <div class="empty-list-placeholder">
+                <slot name="empty-list-message">no item available</slot>
+            </div>
+        </jb-popover>
     </div>
     <div class="message-box"></div>
   </div>