@nanoporetech-digital/components 2.13.2 → 2.14.1

package/dist/custom-elements/index.js

@@ -8974,7 +8974,7 @@ let DataList = class extends H {
       e.stopPropagation();
       this.changeInputValue(e.detail);
       raf(() => this.inputChange());
-      if (this.type === 'select')
+      if (this.type !== 'selctMulti')
         this.shouldOpen = false;
     };
     // sets focus immediately on open when 'select' - mirroring native behaviour
@@ -8986,6 +8986,14 @@ let DataList = class extends H {
       else if (this.type === 'select')
         this.listBox.showActiveElement();
     };
+    this.handleHide = () => {
+      this.open = false;
+      const activeElement = getActiveElement();
+      if (activeElement === document.body ||
+        activeElement.closest(this.host.tagName.toLowerCase())) {
+        this.connectedInput.focus();
+      }
+    };
     this.inputClick = () => {
       this.shouldOpen = true;
       // open dropdown if possible
@@ -9166,8 +9174,8 @@ let DataList = class extends H {
     let autocompleteType = 'both';
     let readonly = false;
     switch (this.type) {
-      case 'selctMulti':
-        // dwConfig.closeOnSelect = false;
+      case 'input':
+        dwConfig = { closeOnSelect: true };
         break;
       case 'select':
         autocompleteType = 'list';
@@ -9389,7 +9397,7 @@ let DataList = class extends H {
     return (h$1(Host$1, { role: "listbox", "aria-owns": this.optionIds.join(' '), "aria-label": "Select options from the list below" }, h$1("nano-dropdown", Object.assign({}, this.dropDownConfig, { ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
         dlist__dropdown: true,
         'dlist--isfiltered': this.isFiltered,
-      }, onNanoAfterShow: this.handleShow, onNanoAfterHide: (_) => (this.open = false) }), h$1("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+      }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide }), h$1("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
         dlist__menu: true,
         'dlist__menu--open': this.dropwdownOpen,
       }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h$1("slot", { name: "list-top" }), !this.options.length && h$1("slot", null), !!this.options.length && h$1("slot", { name: "internal-opts" }), h$1("slot", { name: "list-bottom" })), h$1("nano-menu", { type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
@@ -13257,10 +13265,10 @@ let FieldValidator = class extends H {
       const found = this.allFields.find((field) => this.getName(field) === key);
       // field update has come programmatically (not from ui),
       // so let's update the underlying ui field
-      if ((found &&
-        found.tagName === 'NANO-FILE-UPLOAD' &&
-        !this.fileStateEqual(key, found)) ||
-        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal)) {
+      if (found &&
+        ((found.tagName === 'NANO-FILE-UPLOAD' &&
+          !this.fileStateEqual(key, found)) ||
+          (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))) {
         this.storeToFields([found]);
       }
       if (this.validateOn === 'dirty' && this.dirty) {
@@ -13469,7 +13477,9 @@ let FieldValidator = class extends H {
    * @param state - the state to load in the store
    */
   async setStore(state) {
-    Object.entries(state).forEach(([key, val]) => (this.store.state[key] = val));
+    Object.entries(state).forEach(([key, val]) => {
+      this.store.state[key] = val;
+    });
   }
   /**
    * Sets custom validity for all / some form fields.
@@ -13595,7 +13605,7 @@ let FieldValidator = class extends H {
           if (cb.checked)
             this._store.state[fieldName] = cb.value;
         }
-        else if (this.allFields.filter((f) => this.getName(field) === fieldName &&
+        else if (this.allFields.filter((f) => this.getName(f) === fieldName &&
           (f.tagName === 'NANO-CHECKBOX' ||
             f.type === 'checkbox')).length > 1) {
           // multiple checkbox type control
@@ -18751,6 +18761,8 @@ let Select = class extends H {
     /** nano-dropdown config options you can pass to the nested dropdown component */
     this.dropDownConfig = {};
     this.customValidate = () => {
+      if (!this.nativeSelect)
+        return;
       this.nativeSelect.setCustomValidity('');
       // add custom validations 'cos html5 validations are a bit rubbish on selects
       if (this.required && !this.valArray.length) {
@@ -18803,7 +18815,6 @@ let Select = class extends H {
       e.preventDefault();
       if (!this.multiple) {
         this.value = e.detail.value;
-        this.inputCtrl.focus();
         return;
       }
       if (this.value && this.value.length && this.value.includes(e.detail.value))