fix(ld-select): init ld-option-internal with up-to-date props

emdgroup-liquid · Nov 2, 2021 · 6eb4216 · 6eb4216
1 parent d0428a3
commit 6eb4216
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 9 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -103,6 +103,7 @@ export class LdSelect {
   @State() hasMore = false
   @State() hasCustomIcon = false
   @State() renderHiddenInput = false
+  @State() ignoreSlotChanges = false
 
   @Watch('selected')
   emitEventsAndUpdateHidden(
@@ -334,6 +335,8 @@ export class LdSelect {
   }
 
   private initOptions() {
+    this.ignoreSlotChanges = true
+
     const initialized = this.initialized
     let children
     if (!initialized) {
@@ -363,17 +366,25 @@ export class LdSelect {
     }
 
     if (!initialized) {
-      this.internalOptionsHTML = this.el.innerHTML['replaceAll'](
-        /<ld-option/g,
-        `<ld-option-internal${this.multiple ? ' mode="checkbox"' : ''}${
+      let internalOptionsHTML = ''
+      for (const ldOption of children) {
+        const classStr = ldOption.classList.length
+          ? ldOption.classList.toString()
+          : ''
+        internalOptionsHTML += `<ld-option-internal${
+          classStr ? ' class="' + classStr + '"' : ''
+        }${this.multiple ? ' mode="checkbox"' : ''}${
           this.size ? ' size="' + this.size + '"' : ''
-        }${this.preventDeselection ? ' prevent-deselection' : ''}`
-      )
-        .replaceAll(/<\/ld-option/g, '</ld-option-internal')
-        .replaceAll(
+        }${this.preventDeselection ? ' prevent-deselection' : ''}${
+          ldOption.selected ? ' selected' : ''
+        }${ldOption.value ? ' value="' + ldOption.value + '"' : ''}${
+          ldOption.disabled ? ' disabled' : ''
+        }>${ldOption.innerHTML.replaceAll(
           /<ld-icon (.|\n|\r)*slot="icon"(.|\n|\r)*>(.|\n|\r)*<\/ld-icon>/g,
           ''
-        )
+        )}</ld-option-internal>`
+      }
+      this.internalOptionsHTML = internalOptionsHTML
     }
     this.selected = selectedChildren.map((child) => ({
       value: child.getAttribute('value'),
@@ -420,6 +431,11 @@ export class LdSelect {
   }
 
   private handleSlotChange(mutationsList: MutationRecord[]) {
+    if (this.ignoreSlotChanges) {
+      this.ignoreSlotChanges = false
+      return
+    }
+
     if (
       mutationsList.some(
         (record) => (record.target as HTMLElement).tagName !== 'LD-OPTION'

diff --git a/src/liquid/components/ld-select/test/ld-select.spec.ts b/src/liquid/components/ld-select/test/ld-select.spec.ts
@@ -169,7 +169,7 @@ describe('ld-select', () => {
       `,
     })
 
-    const ldSelect = page.body.querySelector('ld-select[name="fruit"]')
+    const ldSelect = page.root
     const btnTrigger = ldSelect.shadowRoot.querySelector(
       '.ld-select__btn-trigger'
     )
@@ -290,6 +290,48 @@ describe('ld-select', () => {
     expect(internalOptions[1].getAttribute('selected')).toEqual(null)
   })
 
+  it('emits input event on selection of an option', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `
+        <ld-select placeholder="Pick a fruit" name="fruit">
+          <ld-option value="apple">Apple</ld-option>
+          <ld-option value="banana">Banana</ld-option>
+        </ld-select>
+      `,
+    })
+
+    await triggerPopperWithClick(page)
+    const { internalOptions } = await getInternalOptions(page)
+
+    const ldSelect = page.root
+
+    const spyInput = jest.fn()
+    let inputEvent
+    ldSelect.addEventListener('input', (ev) => {
+      inputEvent = ev
+      spyInput()
+    })
+
+    internalOptions[0].click()
+    await page.waitForChanges()
+    jest.advanceTimersByTime(0)
+
+    expect(spyInput).toHaveBeenCalledTimes(1)
+    expect(Array.isArray(inputEvent.detail)).toBeTruthy()
+    expect(inputEvent.detail.length).toEqual(1)
+    expect(inputEvent.detail[0]).toEqual('apple')
+
+    internalOptions[1].click()
+    await page.waitForChanges()
+    jest.advanceTimersByTime(0)
+
+    expect(spyInput).toHaveBeenCalledTimes(2)
+    expect(Array.isArray(inputEvent.detail)).toBeTruthy()
+    expect(inputEvent.detail.length).toEqual(1)
+    expect(inputEvent.detail[0]).toEqual('banana')
+  })
+
   it('deselects a selected option if another option is selected in single select mode', async () => {
     const page = await newSpecPage({
       components,