@umbraco-ui/uui-combobox 1.0.0-rc.1 → 1.0.0

package/lib/index.js

@@ -31,8 +31,9 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     this._search = "";
     this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());
     this._onBlur = () => requestAnimationFrame(() => {
-      if (document.activeElement !== this) {
-        this._close();
+      var _a;
+      if (!((_a = this.shadowRoot) == null ? void 0 : _a.activeElement)) {
+        this._onClose();
       }
     });
     this._onInput = (e) => {
@@ -43,12 +44,11 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       this._open();
     };
     this._onChange = (e) => {
-      var _a, _b;
+      var _a;
       e.stopImmediatePropagation();
       this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || "";
-      this._displayValue = ((_b = this._comboboxList) == null ? void 0 : _b.displayValue) || "";
       this.search = this.value ? this.search : "";
-      this._close();
+      this._onClose();
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     };
     this._open = () => {
@@ -56,14 +56,12 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         return;
       this.open = true;
     };
-    this._close = () => {
-      var _a;
+    this._onClose = () => {
       if (!this.open)
         return;
       this.open = false;
-      this._displayValue = ((_a = this._comboboxList) == null ? void 0 : _a.displayValue) || "";
-      this._input.value = this._displayValue;
       this.search = "";
+      this._input.value = this._displayValue;
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
     };
     this._onKeyDown = (e) => {
@@ -75,19 +73,19 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
         this._open();
       }
       if (e.key === "Escape" || e.key === "Enter") {
-        this._close();
+        this._onClose();
       }
     };
-    this._clear = (e) => {
+    this._onClear = (e) => {
       if (e.key && e.key !== "Enter")
         return;
       e.preventDefault();
       e.stopImmediatePropagation();
-      this._displayValue = "";
-      this._input.value = this._displayValue;
-      this.search = "";
       this.value = "";
-      this._comboboxList.value = this.value;
+      this.search = "";
+      this._input.value = this._displayValue;
+      this._input.focus();
+      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));
       this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
     };
     this._renderInput = () => {
@@ -97,7 +95,6 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       label="combobox-input"
       type="text"
       .value=${this._displayValue}
-      .placeholder=${this._displayValue}
       autocomplete="off"
       @click=${this._open}
       @input=${this._onInput}
@@ -113,21 +110,20 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     </svg>`;
     };
     this._renderClearButton = () => {
-      return html`<uui-button
-      id="clear-button"
-      class=${this.value || this.search ? "--show" : ""}
-      @click=${this._clear}
-      @keydown=${this._clear}
-      label="clear"
-      slot="append"
-      compact
-      style="height: 100%;">
-      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
-    </uui-button>`;
+      return this.value || this.search ? html`<uui-button
+          id="clear-button"
+          @click=${this._onClear}
+          @keydown=${this._onClear}
+          label="clear"
+          slot="append"
+          compact
+          style="height: 100%;">
+          <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
+        </uui-button>` : "";
     };
     this._renderDropdown = () => {
       return html`<div id="dropdown" slot="popover">
-      <uui-scroll-container id="scroll-container">
+      <uui-scroll-container tabindex="-1" id="scroll-container">
         <slot></slot>
       </uui-scroll-container>
     </div>`;
@@ -137,10 +133,10 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     return this._value;
   }
   set value(newValue) {
-    super.value = newValue;
     if (typeof newValue === "string") {
       this._updateValue(newValue);
     }
+    super.value = newValue;
   }
   get search() {
     return this._search;
@@ -173,7 +169,10 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
     if (list) {
       this._comboboxList = list;
       this._comboboxList.for = this;
-      this._comboboxList.addEventListener(UUIComboboxListEvent.CHANGE, this._onChange);
+      this._comboboxList.addEventListener(
+        UUIComboboxListEvent.CHANGE,
+        this._onChange
+      );
       if (typeof this.value === "string") {
         await this.updateComplete;
         this._updateValue(this.value);
@@ -195,7 +194,7 @@ let UUIComboboxElement = class extends FormControlMixin(LitElement) {
       <uui-popover
         .open=${this.open}
         .margin=${-1}
-        @close=${() => this._close()}>
+        @close=${() => this._onClose()}>
         ${this._renderInput()} ${this._renderDropdown()}
       </uui-popover>
     `;
@@ -233,17 +232,6 @@ UUIComboboxElement.styles = [
         box-shadow: var(--uui-shadow-depth-3,0 10px 20px rgba(0,0,0,0.19) , 0 6px 6px rgba(0,0,0,0.23));
       }
 
-      #clear-button {
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 120ms;
-      }
-
-      #clear-button.--show {
-        pointer-events: auto;
-        opacity: 1;
-      }
-
       #caret {
         margin-right: var(--uui-size-3, 9px);
         display: flex;

package/lib/uui-combobox.element.d.ts

@@ -43,9 +43,9 @@ export declare class UUIComboboxElement extends UUIComboboxElement_base {
     private _onInput;
     private _onChange;
     private _open;
-    private _close;
+    private _onClose;
     private _onKeyDown;
-    private _clear;
+    private _onClear;
     private _renderInput;
     private _renderCaret;
     private _renderClearButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-combobox",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,11 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.0.0-rc.1",
-    "@umbraco-ui/uui-button": "1.0.0-rc.1",
-    "@umbraco-ui/uui-combobox-list": "1.0.0-rc.1",
-    "@umbraco-ui/uui-icon": "1.0.0-rc.1",
-    "@umbraco-ui/uui-scroll-container": "1.0.0-rc.1"
+    "@umbraco-ui/uui-base": "1.0.0",
+    "@umbraco-ui/uui-button": "1.0.0",
+    "@umbraco-ui/uui-combobox-list": "1.0.0",
+    "@umbraco-ui/uui-icon": "1.0.0",
+    "@umbraco-ui/uui-scroll-container": "1.0.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-combobox",
-  "gitHead": "127e036dbafa18cc37027591d6548a4cb4700d33"
+  "gitHead": "ffb9cef00262b9f36177adcca9675b4893c0045e"
 }