fix(ld-select): filter by option text content instead of option value

Resolves: #393
emdgroup-liquid · Jul 28, 2022 · 83e6d1b · 83e6d1b
1 parent a3fd094
commit 83e6d1b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -633,7 +633,7 @@ export class LdSelect implements InnerFocusable {
     const query = this.getFilterInput().value.trim().toLowerCase()
     options.forEach((ldOption) => {
       ldOption.hidden =
-        Boolean(query) && !ldOption.value.toLowerCase().includes(query)
+        Boolean(query) && !ldOption.textContent.toLowerCase().includes(query)
     })
 
     // Re-position popper after new height has been applied.

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
@@ -1167,7 +1167,7 @@ exports[`ld-select places the popper inside a given element 1`] = `
       </ld-option>
       <input name="fruit" slot="hidden" type="hidden">
     </ld-select>
-    <div data-tether-id="48" style="top: 0; left: 0; position: absolute;"></div>
+    <div data-tether-id="49" style="top: 0; left: 0; position: absolute;"></div>
     <ld-select-popper class="ld-select__popper--initialized ld-tether-element ld-tether-element-attached-left ld-tether-element-attached-top ld-tether-enabled ld-tether-target-attached-bottom ld-tether-target-attached-left" role="listbox" style="z-index: 2147483646; display: block; top: 0; left: 0; position: absolute; transform: translateX(NaNpx) translateY(NaNpx) translateZ(0); width: 0px;">
       <mock:shadow-root>
         <div class="ld-select-popper ld-select-popper--expanded" part="popper">

diff --git a/src/liquid/components/ld-select/test/ld-select.spec.ts b/src/liquid/components/ld-select/test/ld-select.spec.ts
@@ -2658,6 +2658,53 @@ describe('ld-select', () => {
       expect(spyFocusBana).toHaveBeenCalledTimes(0)
       expect(spyFocusPlum).toHaveBeenCalledTimes(1)
     })
+
+    it('filters using option text content (not option value)', async () => {
+      const page = await newSpecPage({
+        components,
+        html: `
+        <ld-select filter placeholder="Pick a fruit" name="fruit">
+          <ld-option value="0">Apple</ld-option>
+          <ld-option value="1">Banana</ld-option>
+          <ld-option value="2" disabled>Orange</ld-option>
+          <ld-option value="3">Cherry</ld-option>
+        </ld-select>
+      `,
+      })
+
+      const ldSelect = page.root
+      const btnTrigger = ldSelect.shadowRoot.querySelector(
+        '.ld-select__btn-trigger'
+      )
+      btnTrigger['focus'] = jest.fn()
+
+      const filterInput = ldSelect.shadowRoot.querySelector<HTMLInputElement>(
+        '.ld-select__btn-trigger-input'
+      )
+      filterInput.focus = jest.fn()
+
+      await triggerPopperWithClick(page)
+      expect(btnTrigger.getAttribute('aria-expanded')).toEqual('true')
+
+      const { ldInternalOptions, internalOptions } = await getInternalOptions(
+        page
+      )
+      expect(ldInternalOptions.length).toEqual(4)
+
+      internalOptions.forEach((internalOption) => {
+        internalOption.focus = jest.fn()
+      })
+
+      filterInput.value = 'e'
+      filterInput.dispatchEvent(new InputEvent('input'))
+
+      await page.waitForChanges()
+
+      expect(ldInternalOptions[0]).not.toHaveAttribute('hidden')
+      expect(ldInternalOptions[1]).toHaveAttribute('hidden')
+      expect(ldInternalOptions[2]).not.toHaveAttribute('hidden')
+      expect(ldInternalOptions[3]).not.toHaveAttribute('hidden')
+    })
   })
 
   it('displays more indicator with maxRows prop set in multiple mode', async () => {