fix(ld-select): mutation observer and click on disabled and focus out…

…line

screenshot/builds/master.json

@@ -9847,7 +9847,7 @@
     },
     {
       "id": "de1ab3ef",
-      "image": "134b5d426d93d5cd56a60e3dbbf84037.png",
+      "image": "3c701e34bc4e86b081cfa8a5647e4468.png",
       "userAgent": "default",
       "desc": "ld-select single aria-disabled focus theme-none",
       "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
@@ -15163,4 +15163,4 @@
       "isMobile": false
     }
   ]
-}
+}

src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap

@@ -1,5 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ld-input creates hidden input field, if inside a form 1`] = `
+<ld-input class="ld-input" name="example">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <input name="example" type="hidden">
+</ld-input>
+`;
+
+exports[`ld-input fills hidden input field with initial value 1`] = `
+<ld-input class="ld-input" name="example" value="hello">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable" value="hello">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <input name="example" type="hidden" value="hello">
+</ld-input>
+`;
+
 exports[`ld-input removes size from ld-button css component 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
@@ -53,20 +75,6 @@ exports[`ld-input removes size from ld-icon web component 1`] = `
   </mock:shadow-root>
   <ld-icon name="placeholder" slot="start"></ld-icon>
   <ld-icon name="placeholder" slot="end"></ld-icon>
-exports[`ld-input creates hidden input field, if inside a form 1`] = `
-<ld-input class="ld-input" name="example">
-  <input name="example" type="hidden">
-</ld-input>
-`;
-
-exports[`ld-input fills hidden input field with initial value 1`] = `
-<ld-input class="ld-input" name="example" value="hello">
-  <mock:shadow-root>
-    <slot name="start"></slot>
-    <input part="input focusable" value="hello">
-    <slot name="end"></slot>
-  </mock:shadow-root>
-  <input name="example" type="hidden" value="hello">
 </ld-input>
 `;
 

src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css

@@ -18,6 +18,7 @@
   --ld-option-thm-col-bg-focus: var(--ld-col-rb1);
   --ld-option-thm-col-bg-active: var(--ld-col-rb1);
 
+  /*outline: none;*/
   display: flex;
   position: relative;
   color: var(--ld-option-col);
@@ -29,7 +30,6 @@
   user-select: none;
   touch-action: manipulation;
   border: 0;
-  outline: none;
   -webkit-touch-callout: none;
   border-bottom: solid var(--ld-option-col-border) var(--ld-sp-1);
   box-sizing: border-box;

src/liquid/components/ld-select/ld-option/ld-option.tsx

@@ -33,16 +33,16 @@ export class LdOption {
 
   componentWillLoad() {
     applyPropAliases.apply(this)
+    // Setting selected via prop directly triggers the mutation observer to fire twice on attribute chage.
+    // This is indeed only true for the selected attribute. The disabled attribute works fine when assigned directly.
+    if (this.selected) {
+      this.el.setAttribute('selected', '')
+    }
   }
 
   render() {
     return (
-      <Host
-        class="ld-option"
-        selected={this.selected}
-        disabled={this.disabled}
-        value={this.value}
-      >
+      <Host class="ld-option">
         <slot></slot>
       </Host>
     )

src/liquid/components/ld-select/ld-select.css

@@ -139,13 +139,13 @@
 
 .ld-select > select,
 .ld-select__btn-trigger {
+  /*outline: none;*/
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   font: var(--ld-typo-body-m);
   border: 0;
-  outline: none;
   padding: var(--ld-select-padding-y-md) var(--ld-select-padding-x-md);
   border-radius: var(--ld-br-m);
   height: 100%;
@@ -390,8 +390,8 @@
 
 .ld-select__btn-clear-single,
 .ld-select__btn-clear {
+  /*outline: none;*/
   border: 0;
-  outline: none;
   padding: 0;
   border-radius: var(--ld-br-full);
   user-select: none;
@@ -416,6 +416,7 @@
 
 .ld-select__btn-clear-single {
   z-index: 1;
+  margin-left: var(--ld-sp-6);
 }
 
 .ld-select__selection-label {
@@ -450,7 +451,6 @@
   --ld-select-btn-clear-single-size: 0.75rem;
   width: var(--ld-select-btn-clear-single-size);
   height: var(--ld-select-btn-clear-single-size);
-  margin-left: var(--ld-sp-6);
 }
 
 .ld-select__btn-clear-icon {
@@ -557,8 +557,10 @@
     }
   }
 }
-:where(.ld-select:not(ld-select)):not(.ld-select--invalid) {
-  :where(select:not(:disabled)) {
+
+:where(.ld-select:not([disabled])):not(.ld-select--invalid) {
+  :where(select:not(:disabled)),
+  :where(.ld-select__btn-trigger) {
     &:where(:focus:focus-visible) {
       box-shadow: inset 0 0 0 0.1rem var(--ld-select-thm-col);
     }

src/liquid/components/ld-select/ld-select.tsx

@@ -35,7 +35,6 @@ export class LdSelect {
   private selectRef!: HTMLElement
   private triggerRef!: HTMLElement
   private selectionListRef!: HTMLElement
-  private slotContainerRef!: HTMLElement
   private internalOptionsContainerRef!: HTMLElement
   private listboxRef!: HTMLElement
   private btnClearRef: HTMLButtonElement
@@ -393,7 +392,6 @@ export class LdSelect {
       if (index >= 0) {
         selectedValues.splice(index, 1)
       } else {
-        console.log('here')
         hiddenInput.remove()
       }
     })
@@ -421,7 +419,15 @@ export class LdSelect {
     this.el.appendChild(hiddenInput)
   }
 
-  private handleSlotChange() {
+  private handleSlotChange(mutationsList: MutationRecord[]) {
+    if (
+      mutationsList.some(
+        (record) => (record.target as HTMLElement).tagName !== 'LD-OPTION'
+      )
+    ) {
+      return
+    }
+
     this.initialized = false
 
     const oldValues = [...this.selected]
@@ -433,9 +439,8 @@ export class LdSelect {
   }
 
   private initObserver() {
-    if (this.observer) this.observer.disconnect()
     this.observer = new MutationObserver(this.handleSlotChange.bind(this))
-    this.observer.observe(this.slotContainerRef, {
+    this.observer.observe(this.el, {
       subtree: true,
       childList: true,
       attributes: true,
@@ -782,6 +787,9 @@ export class LdSelect {
 
   private handleTriggerClick(ev: Event) {
     ev.preventDefault()
+
+    if (this.disabled || this.ariaDisabled) return
+
     this.expand()
   }
 
@@ -911,11 +919,7 @@ export class LdSelect {
           }
         >
           {this.renderHiddenInput && <slot name="hidden" />}
-          <div
-            ref={(el) => (this.slotContainerRef = el as HTMLElement)}
-            class="ld-select__slot-container"
-            part="slot-container"
-          >
+          <div class="ld-select__slot-container" part="slot-container">
             <slot></slot>
           </div>
           <div