From 8a4a58e8154716b802e2c5f14804f61144d02000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Schubert?= <reneschubert@gmx.de>
Date: Thu, 28 Oct 2021 12:05:47 +0200
Subject: [PATCH] fix(ld-select): form validation / event timing

---
 src/liquid/components/ld-select/ld-select.tsx |  66 ++++++-----
 src/liquid/components/ld-select/readme.md     |   2 +-
 .../test/__snapshots__/ld-select.spec.ts.snap | 106 ++++++++++++++++--
 3 files changed, 135 insertions(+), 39 deletions(-)

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
index e195f432be..31d93f9681 100644
--- a/src/liquid/components/ld-select/ld-select.tsx
+++ b/src/liquid/components/ld-select/ld-select.tsx
@@ -106,7 +106,10 @@ export class LdSelect {
   @State() renderHiddenInput = false
 
   @Watch('selected')
-  emitEvents(newSelection: SelectOption[], oldSelection: SelectOption[]) {
+  emitEventsAndUpdateHidden(
+    newSelection: SelectOption[],
+    oldSelection: SelectOption[]
+  ) {
     if (!this.initialized) return
 
     const newValues = newSelection.map((option) => option.value)
@@ -115,6 +118,10 @@ export class LdSelect {
 
     this.updateTriggerMoreIndicator(true)
 
+    if (this.renderHiddenInput) {
+      this.updateHiddenInput(newSelection)
+    }
+
     this.input.emit(newValues)
     this.change.emit(newValues)
   }
@@ -356,31 +363,25 @@ export class LdSelect {
       )
     }
 
-    setTimeout(() => {
-      if (!initialized) {
-        this.internalOptionsHTML = this.el.innerHTML['replaceAll'](
-          /<ld-option/g,
-          `<ld-option-internal${this.multiple ? ' mode="checkbox"' : ''}${
-            this.size ? ' size="' + this.size + '"' : ''
-          }${this.preventDeselection ? ' prevent-deselection' : ''}`
+    if (!initialized) {
+      this.internalOptionsHTML = this.el.innerHTML['replaceAll'](
+        /<ld-option/g,
+        `<ld-option-internal${this.multiple ? ' mode="checkbox"' : ''}${
+          this.size ? ' size="' + this.size + '"' : ''
+        }${this.preventDeselection ? ' prevent-deselection' : ''}`
+      )
+        .replaceAll(/<\/ld-option/g, '</ld-option-internal')
+        .replaceAll(
+          /<ld-icon (.|\n|\r)*slot="icon"(.|\n|\r)*>(.|\n|\r)*<\/ld-icon>/g,
+          ''
         )
-          .replaceAll(/<\/ld-option/g, '</ld-option-internal')
-          .replaceAll(
-            /<ld-icon (.|\n|\r)*slot="icon"(.|\n|\r)*>(.|\n|\r)*<\/ld-icon>/g,
-            ''
-          )
-      }
-      this.selected = selectedChildren.map((child) => ({
-        value: child.getAttribute('value'),
-        text: child.innerText,
-      }))
-
-      if (this.renderHiddenInput) {
-        this.updateHiddenInput(this.selected)
-      }
+    }
+    this.selected = selectedChildren.map((child) => ({
+      value: child.getAttribute('value'),
+      text: child.innerText,
+    }))
 
-      this.updateTriggerMoreIndicator(true)
-    })
+    this.updateTriggerMoreIndicator(true)
   }
 
   private updateHiddenInput = (selected: SelectOption[]) => {
@@ -392,6 +393,7 @@ export class LdSelect {
       if (index >= 0) {
         selectedValues.splice(index, 1)
       } else {
+        console.log('here')
         hiddenInput.remove()
       }
     })
@@ -425,11 +427,9 @@ export class LdSelect {
     const oldValues = [...this.selected]
     this.initOptions()
 
-    setTimeout(() => {
-      this.initialized = true
-      const newValues = [...this.selected]
-      this.emitEvents(newValues, oldValues)
-    })
+    this.initialized = true
+    const newValues = [...this.selected]
+    this.emitEventsAndUpdateHidden(newValues, oldValues)
   }
 
   private initObserver() {
@@ -837,11 +837,15 @@ export class LdSelect {
     if (this.el.getAttribute('aria-disabled') === 'true') {
       this.ariaDisabled = true
     }
-  }
 
-  componentDidLoad() {
     this.initOptions()
 
+    if (this.renderHiddenInput) {
+      this.updateHiddenInput(this.selected)
+    }
+  }
+
+  componentDidLoad() {
     setTimeout(() => {
       this.initObserver()
       this.initialized = true
diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md
index 7ca72278ec..e661dbbac9 100644
--- a/src/liquid/components/ld-select/readme.md
+++ b/src/liquid/components/ld-select/readme.md
@@ -1191,7 +1191,7 @@ The `ld-select` Web Component provides a low level API for integrating it with t
   const submitButton = document.querySelector('#example-form ld-button')
   let selectDirty = false
   function validateInput() {
-    if (selectDirty && (!form.fruits.  || form.fruits.length < 3)) {
+    if (selectDirty && (!form.fruits || !form.fruits.length || form.fruits.length < 3)) {
       select.setAttribute('invalid', 'true')
       errorMessage.style.visibility = 'inherit'
       return false
diff --git a/src/liquid/components/ld-select/test/__snapshots__/ld-select.spec.ts.snap b/src/liquid/components/ld-select/test/__snapshots__/ld-select.spec.ts.snap
index 995945e68a..e96e6e3992 100644
--- a/src/liquid/components/ld-select/test/__snapshots__/ld-select.spec.ts.snap
+++ b/src/liquid/components/ld-select/test/__snapshots__/ld-select.spec.ts.snap
@@ -30,7 +30,34 @@ exports[`ld-select creates hidden input field, if inside a form 1`] = `
             </div>
           </div>
         </mock:shadow-root>
-        <div part="options-container"></div>
+        <div part="options-container">
+          <ld-option-internal value="apple">
+            <mock:shadow-root>
+              <div aria-disabled="false" aria-selected="false" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
+                <svg class="ld-option-internal__check" fill="none" height="20" part="check" role="presentation" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15 7L8.40795 13L5 9.63964" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="visibility: hidden;"></path>
+                </svg>
+                <span class="ld-option-internal__label" part="label">
+                  <slot></slot>
+                </span>
+              </div>
+            </mock:shadow-root>
+            Apple
+          </ld-option-internal>
+          <ld-option-internal value="banana">
+            <mock:shadow-root>
+              <div aria-disabled="false" aria-selected="false" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
+                <svg class="ld-option-internal__check" fill="none" height="20" part="check" role="presentation" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15 7L8.40795 13L5 9.63964" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="visibility: hidden;"></path>
+                </svg>
+                <span class="ld-option-internal__label" part="label">
+                  <slot></slot>
+                </span>
+              </div>
+            </mock:shadow-root>
+            Banana
+          </ld-option-internal>
+        </div>
       </ld-select-popper>
     </div>
   </mock:shadow-root>
@@ -60,11 +87,49 @@ exports[`ld-select fills hidden input fields with initially selected option valu
       </div>
       <div class="ld-select__select" part="select">
         <div aria-disabled="false" aria-expanded="false" aria-haspopup="listbox" aria-label="Pick a fruit" class="ld-select__btn-trigger" part="btn-trigger focusable" role="button" tabindex="0">
-          <span class="ld-select__btn-trigger-text-wrapper" part="trigger-text-wrapper" title="Pick a fruit">
-            <span class="ld-select__btn-trigger-text" part="trigger-text">
-              Pick a fruit
-            </span>
-          </span>
+          <ul aria-label="Selected options" class="ld-select__selection-list" part="selection-list">
+            <li class="ld-select__selection-list-item" part="selection-list-item" style="order: 1;">
+              <label class="ld-select__selection-label">
+                <span class="ld-select__selection-label-text" part="selection-label-text" title="Apple">
+                  Apple
+                </span>
+                <button class="ld-select__btn-clear-single" part="btn-clear-single focusable">
+                  <svg class="ld-select__btn-clear-single-icon" fill="none" part="icon-clear-single" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                    <title>
+                      Clear
+                    </title>
+                    <path d="M2 2l8 8M2 10l8-8" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+                  </svg>
+                </button>
+                <span class="ld-select__selection-label-bg" part="selection-label-bg"></span>
+              </label>
+            </li>
+            <li class="ld-select__selection-list-item" part="selection-list-item" style="order: 2;">
+              <label class="ld-select__selection-label">
+                <span class="ld-select__selection-label-text" part="selection-label-text" title="Banana">
+                  Banana
+                </span>
+                <button class="ld-select__btn-clear-single" part="btn-clear-single focusable">
+                  <svg class="ld-select__btn-clear-single-icon" fill="none" part="icon-clear-single" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                    <title>
+                      Clear
+                    </title>
+                    <path d="M2 2l8 8M2 10l8-8" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+                  </svg>
+                </button>
+                <span class="ld-select__selection-label-bg" part="selection-label-bg"></span>
+              </label>
+            </li>
+          </ul>
+          <button class="ld-select__btn-clear" part="btn-clear focusable">
+            <svg class="ld-select__btn-clear-icon" fill="none" part="icon-clear" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg">
+              <title>
+                Clear all
+              </title>
+              <path clip-rule="evenodd" d="M10 20a10 10 0 100-20 10 10 0 000 20z" fill="currentColor" fill-rule="evenodd"></path>
+              <path d="M6.67 6.67l6.67 6.66M6.67 13.33l6.67-6.66" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+            </svg>
+          </button>
           <slot name="icon"></slot>
           <svg class="ld-select__icon" part="trigger-icon" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <path d="M3 6l5 4 5-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
@@ -80,7 +145,34 @@ exports[`ld-select fills hidden input fields with initially selected option valu
             </div>
           </div>
         </mock:shadow-root>
-        <div part="options-container"></div>
+        <div part="options-container">
+          <ld-option-internal mode="checkbox" selected="" value="apple">
+            <mock:shadow-root>
+              <div aria-disabled="false" aria-selected="true" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
+                <div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
+                  <ld-checkbox checked="" class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
+                </div>
+                <span class="ld-option-internal__label" part="label">
+                  <slot></slot>
+                </span>
+              </div>
+            </mock:shadow-root>
+            Apple
+          </ld-option-internal>
+          <ld-option-internal mode="checkbox" selected="" value="banana">
+            <mock:shadow-root>
+              <div aria-disabled="false" aria-selected="true" class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
+                <div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
+                  <ld-checkbox checked="" class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
+                </div>
+                <span class="ld-option-internal__label" part="label">
+                  <slot></slot>
+                </span>
+              </div>
+            </mock:shadow-root>
+            Banana
+          </ld-option-internal>
+        </div>
       </ld-select-popper>
     </div>
   </mock:shadow-root>