@ukic/web-components 2.1.0-beta.7 → 2.1.0-beta.9

package/dist/esm/ic-select.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1500de1f.js';
-import { w as getLabelFromValue, v as getFilteredMenuOptions, m as inheritAttributes, d as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, e as renderHiddenInput, h as getInputDescribedByText, j as hasValidationStatus, x as isMobileOrTablet, n as IC_INHERITED_ARIA } from './helpers-46e5291b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-90721b3c.js';
+import { w as getLabelFromValue, v as getFilteredMenuOptions, m as inheritAttributes, d as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, e as renderHiddenInput, h as getInputDescribedByText, j as hasValidationStatus, x as isMobileOrTablet, n as IC_INHERITED_ARIA } from './helpers-c332acf8.js';
 import { I as IcThemeForegroundEnum, a as IcInformationStatus } from './types-dd515332.js';
 
-const Expand = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+const Expand = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor" />
 </svg>
 `;
@@ -12,18 +12,33 @@ const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www
 </svg>
 `;
 
-const icSelectCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 6px center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center}.select-input{width:100%;height:100%;padding:0 6px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not([disabled])) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}:host([disabled]) .select-input{pointer-events:none}:host([searchable]) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}:host([disabled]) .expand-icon,:host([disabled]) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host([searchable]) .expand-icon{padding-left:var(--ic-space-xxs);height:36px}:host([searchable]) .expand-icon>svg{height:36px;padding:0 6px}:host([searchable]:not([disabled])) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host([searchable]) .expand-icon-open{transform:rotateX(180deg)}:host([disabled]) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:38px}:host([small]) .clear-button-container{padding-left:30px}.divider{width:1px;background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:1px;height:var(--ic-space-lg)}:host([small]) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:44px;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 2px var(--ic-focus-glow);border-radius:4px}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+const icSelectCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:relative}:host([full-width]){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not([disabled])) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}:host([disabled]) .select-input{pointer-events:none}:host([searchable]) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host([disabled]) .expand-icon,:host([disabled]) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host([searchable]) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host([searchable]) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host([searchable]:not([disabled])) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host([searchable]) .expand-icon-open{transform:rotateX(180deg)}:host([disabled]) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem}:host([small]) .clear-button-container{padding-left:1.875rem}.divider{width:0.063rem;background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:0.063rem;height:var(--ic-space-lg)}:host([small]) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:0.063rem;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:0.063rem}";
 
 let inputIds = 0;
 const Select = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.icChange = createEvent(this, "icChange", 7);
+    this.icClear = createEvent(this, "icClear", 7);
     this.icFocus = createEvent(this, "icFocus", 7);
     this.icBlur = createEvent(this, "icBlur", 7);
+    this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
+    this.icInput = createEvent(this, "icInput", 7);
     this.inputId = `ic-select-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
     this.inheritedAttributes = {};
+    this.hasSetSearchableDefaultValue = false;
+    this.initialRender = false;
+    this.emitIcChange = (value) => {
+      clearTimeout(this.debounceIcChange);
+      this.debounceIcChange = window.setTimeout(() => {
+        this.icChange.emit({ value: value });
+      }, this.currDebounce);
+    };
+    this.emitImmediateIcChange = (value) => {
+      clearTimeout(this.debounceIcChange);
+      this.icChange.emit({ value: value });
+    };
     this.isMenuEnabled = () => {
       return (((this.searchableSelectInputValue === null ||
         this.searchableSelectInputValue === "") &&
@@ -70,7 +85,8 @@ const Select = class {
       return newOption;
     };
     this.handleNativeSelectChange = () => {
-      this.icChange.emit({ value: this.nativeSelectElement.value });
+      this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
+      this.emitImmediateIcChange(this.nativeSelectElement.value);
       this.setTextColor();
     };
     this.handleCustomSelectChange = (event) => {
@@ -82,12 +98,19 @@ const Select = class {
         this.searchableSelectInputValue = this.getLabelFromValue(event.detail.value);
       }
       this.ariaActiveDescendant = event.detail.optionId;
-      this.icChange.emit({ value: event.detail.value });
+      this.icOptionSelect.emit({ value: event.detail.value });
+      this.emitImmediateIcChange(event.detail.value);
     };
     this.handleMenuChange = (event) => {
       this.open = event.detail.open;
       this.searchable && this.handleFocusIndicatorDisplay();
     };
+    // clears the debounce delay when navigating the menu with arrow keys etc
+    // to prevent delay in change event, which should only occur when typing in input
+    this.handleMenuKeyPress = (ev) => {
+      const debounce = ev.detail.isNavKey ? 0 : this.debounce;
+      this.debounceChangedHandler(debounce);
+    };
     this.handleFocusIndicatorDisplay = () => {
       const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
       if (this.open) {
@@ -102,9 +125,15 @@ const Select = class {
         event.preventDefault();
       }
     };
+    this.isExternalFiltering = () => this.searchable && this.disableFilter;
     this.handleClick = (event) => {
-      this.noOptions = null;
-      this.menu.options = this.options;
+      if (this.isExternalFiltering()) {
+        this.menu.options = this.filteredOptions;
+      }
+      else {
+        this.noOptions = null;
+        this.menu.options = this.options;
+      }
       if (event.detail !== 0 && this.isMenuEnabled()) {
         this.menu.handleClickOpen();
       }
@@ -119,7 +148,8 @@ const Select = class {
     this.handleClear = (event) => {
       event.stopPropagation();
       this.noOptions = null;
-      this.icChange.emit({ value: null });
+      this.emitImmediateIcChange(null);
+      this.icClear.emit();
       if (this.searchable) {
         this.searchableSelectElement.value = null;
         this.searchableSelectInputValue = null;
@@ -135,17 +165,24 @@ const Select = class {
     };
     this.handleKeyDown = (event) => {
       event.cancelBubble = true;
+      const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
       if (!this.open) {
-        this.noOptions = null;
-        this.menu.options = this.options;
+        if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
+          this.menu.options = this.filteredOptions;
+        }
+        else {
+          this.noOptions = null;
+          this.menu.options = this.options;
+        }
       }
       if (this.open && event.key === "Enter") {
         this.setMenuChange(false);
       }
       else {
-        if (!((event.key === "ArrowDown" || event.key === "ArrowUp") &&
-          this.noOptions !== null) &&
-          this.isMenuEnabled()) {
+        if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {
+          if (this.isExternalFiltering() && isArrowKey && this.debounce > 0) {
+            this.debounceChangedHandler(0);
+          }
           this.menu.handleKeyboardOpen(event);
         }
       }
@@ -158,8 +195,12 @@ const Select = class {
     };
     this.handleSearchableSelectInput = (event) => {
       this.searchableSelectInputValue = event.target.value;
-      if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
-        this.icChange.emit({ value: null });
+      this.icInput.emit({ value: this.searchableSelectInputValue });
+      if (this.disableFilter) {
+        this.emitIcChange(this.searchableSelectInputValue);
+      }
+      else if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
+        this.emitIcChange(null);
       }
       if (this.isMenuEnabled()) {
         this.setMenuChange(true);
@@ -167,62 +208,70 @@ const Select = class {
       else {
         this.setMenuChange(false);
       }
-      const options = [...this.options];
-      let isGrouped = false;
-      let newFilteredOptions = [];
-      options.map((option) => {
-        if (option.children)
-          isGrouped = true;
-      });
-      const menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
-      if (!isGrouped) {
-        newFilteredOptions = menuOptionsFiltered;
-      }
-      else {
+      if (!this.disableFilter) {
+        const options = [...this.options];
+        let isGrouped = false;
+        let newFilteredOptions = [];
         options.map((option) => {
-          if (this.includeGroupTitlesInSearch) {
-            if (menuOptionsFiltered.indexOf(option) !== -1) {
-              newFilteredOptions.push(option);
+          if (option.children)
+            isGrouped = true;
+        });
+        const menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+        if (!isGrouped) {
+          newFilteredOptions = menuOptionsFiltered;
+        }
+        else {
+          options.map((option) => {
+            if (this.includeGroupTitlesInSearch) {
+              if (menuOptionsFiltered.indexOf(option) !== -1) {
+                newFilteredOptions.push(option);
+              }
+              else {
+                newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+              }
             }
             else {
               newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
             }
-          }
-          else {
-            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
-          }
-        });
-      }
-      let noChildOptionsWhenFiltered = false;
-      if (isGrouped) {
-        noChildOptionsWhenFiltered = true;
-        newFilteredOptions.map((option) => {
-          if (option.children.length > 0) {
-            noChildOptionsWhenFiltered = false;
-          }
-        });
-      }
-      const noOptions = [{ label: this.emptyOptionListText, value: "" }];
-      if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
-        this.noOptions = null;
-        this.filteredOptions = newFilteredOptions;
-      }
-      else {
-        this.noOptions = noOptions;
-        this.filteredOptions = this.noOptions;
+          });
+        }
+        let noChildOptionsWhenFiltered = false;
+        if (isGrouped) {
+          noChildOptionsWhenFiltered = true;
+          newFilteredOptions.map((option) => {
+            if (option.children.length > 0) {
+              noChildOptionsWhenFiltered = false;
+            }
+          });
+        }
+        const noOptions = [{ label: this.emptyOptionListText, value: "" }];
+        if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
+          this.noOptions = null;
+          this.filteredOptions = newFilteredOptions;
+        }
+        else {
+          this.noOptions = noOptions;
+          this.filteredOptions = this.noOptions;
+        }
+        this.debounceAriaLiveUpdate();
       }
-      this.debounceAriaLiveUpdate();
     };
     this.updateSearchableSelectResultAriaLive = () => {
       const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(".searchable-select-results-status");
-      if (this.noOptions !== null) {
-        searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
-      }
-      else {
-        searchableSelectResultsStatusEl.innerText = "";
+      if (searchableSelectResultsStatusEl) {
+        if (this.noOptions !== null) {
+          searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
+        }
+        else {
+          searchableSelectResultsStatusEl.innerText = "";
+        }
       }
     };
+    this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
     this.onFocus = () => {
+      if (this.isExternalFiltering() && this.debounce > 0) {
+        this.debounceChangedHandler(this.debounce);
+      }
       this.icFocus.emit();
     };
     this.onBlur = (event) => {
@@ -237,7 +286,7 @@ const Select = class {
     this.handleFormReset = () => {
       this.value = this.initialValue;
       if (this.searchable) {
-        this.searchableSelectInputValue = null;
+        this.searchableSelectInputValue = this.getDefaultValue(this.value);
       }
     };
     this.label = undefined;
@@ -253,6 +302,7 @@ const Select = class {
     this.validationStatus = "";
     this.validationText = "";
     this.value = undefined;
+    this.debounce = 0;
     this.name = this.inputId;
     this.showClearButton = false;
     this.searchable = false;
@@ -261,6 +311,7 @@ const Select = class {
     this.searchMatchPosition = "anywhere";
     this.charactersUntilSuggestions = 0;
     this.emptyOptionListText = "No results found";
+    this.disableFilter = false;
     this.open = false;
     this.clearButtonFocused = false;
     this.searchableSelectInputValue = null;
@@ -268,10 +319,34 @@ const Select = class {
     this.ariaActiveDescendant = undefined;
     this.noOptions = null;
     this.initialValue = this.value;
+    this.currDebounce = this.debounce;
+    this.debounceIcChange = undefined;
   }
   watchOptionsHandler() {
-    this.setOptionsValuesFromLabels();
-    this.filteredOptions = this.options;
+    if (this.isExternalFiltering()) {
+      if (this.options.length > 0) {
+        this.setOptionsValuesFromLabels();
+        this.noOptions = null;
+        this.filteredOptions = this.options;
+      }
+      else if (this.isMenuEnabled()) {
+        this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+        this.filteredOptions = this.noOptions;
+        // Will prevent 'No results found' displaying on initial load and setting default value
+        if (!this.initialRender) {
+          this.setMenuChange(true);
+        }
+      }
+      this.updateSearchableSelectResultAriaLive();
+      this.setSearchableDefaultValue();
+    }
+    else {
+      this.setOptionsValuesFromLabels();
+      this.filteredOptions = this.options;
+    }
+  }
+  debounceChangedHandler(newValue) {
+    this.updateOnChangeDebounce(newValue);
   }
   /**
    * Sets focus on the input box.
@@ -287,12 +362,24 @@ const Select = class {
       this.searchableSelectElement.focus();
     }
   }
+  updateOnChangeDebounce(newValue) {
+    if (this.currDebounce !== newValue) {
+      this.currDebounce = newValue;
+    }
+  }
   debounceAriaLiveUpdate() {
-    clearTimeout(this.debounce);
+    clearTimeout(this.debounceAria);
     window.setTimeout(() => {
       this.updateSearchableSelectResultAriaLive();
     }, 800);
   }
+  setSearchableDefaultValue() {
+    if (!this.hasSetSearchableDefaultValue && this.value && this.searchable) {
+      this.searchableSelectInputValue = this.getDefaultValue(this.value);
+      this.initialValue = this.value;
+      this.hasSetSearchableDefaultValue = true;
+    }
+  }
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.host, [
       ...IC_INHERITED_ARIA,
@@ -301,12 +388,19 @@ const Select = class {
     ]);
     this.setOptionsValuesFromLabels();
     addFormResetListener(this.host, this.handleFormReset);
+    this.initialRender = true;
+    if (!this.disableFilter) {
+      this.setSearchableDefaultValue();
+    }
   }
   componentDidRender() {
     if (this.nativeSelectElement && !this.disabled) {
       this.setTextColor();
     }
   }
+  componentWillUpdate() {
+    this.initialRender = false;
+  }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
   }
@@ -348,11 +442,13 @@ const Select = class {
         "no-results": this.noOptions !== null,
       }, ref: (el) => (this.menu = el), inputEl: searchable
         ? this.searchableSelectElement
-        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: value, fullWidth: fullWidth, onIcMenuStateChange: this.handleMenuChange, onIcOptionSelect: this.handleCustomSelectChange, parentEl: this.host })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: value, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, parentEl: this.host })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
   }
+  static get delegatesFocus() { return true; }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "options": ["watchOptionsHandler"]
+    "options": ["watchOptionsHandler"],
+    "debounce": ["debounceChangedHandler"]
   }; }
 };
 Select.style = icSelectCss;