@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.4

package/dist/packages/combobox/combobox.stories.js

@@ -9,7 +9,11 @@ const meta = {
     title: 'Forms/Combobox',
     component: 'w-combobox',
     render(args) {
-        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
+        return html `
+      <w-combobox ${spread(prespread(args))}>
+        ${sampleOptionElements}
+      </w-combobox>
+    `;
     },
     parameters: {
         docs: {
@@ -34,21 +38,32 @@ const sampleOptions = [
     { value: 'pineapple', label: 'Pineapple' },
     { value: 'mango', label: 'Mango' },
 ];
+const sampleOptionElements = html `
+  <option value="apple">Apple</option>
+  <option value="banana">Banana</option>
+  <option value="orange">Orange</option>
+  <option value="grape">Grape</option>
+  <option value="strawberry">Strawberry</option>
+  <option value="pineapple">Pineapple</option>
+  <option value="mango">Mango</option>
+`;
 export const Default = {
     args: {},
-    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
+    render: () => html `
+      <w-combobox label="Select a fruit" placeholder="Type to search...">
+        ${sampleOptionElements}
+      </w-combobox>
+    `,
 };
 export const WithValue = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
-        value: 'Apple',
+        value: 'apple',
     },
 };
 export const OpenOnFocus = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         openOnFocus: true,
@@ -56,7 +71,6 @@ export const OpenOnFocus = {
 };
 export const WithTextMatching = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         matchTextSegments: true,
@@ -64,7 +78,6 @@ export const WithTextMatching = {
 };
 export const Invalid = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         value: 'Invalid fruit',
@@ -74,16 +87,14 @@ export const Invalid = {
 };
 export const Disabled = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
-        value: 'Apple',
+        value: 'apple',
         disabled: true,
     },
 };
 export const Optional = {
     args: {
-        options: sampleOptions,
         label: 'Select a fruit',
         placeholder: 'Type to search...',
         optional: true,
@@ -125,17 +136,19 @@ export const FormSubmission = {
         name="warp-combo-1"
         label="Select a fruit (dynamic)"
         placeholder="Type to search..."
-        .options="${sampleOptions}"
-      ></w-combobox>
+      >
+        ${sampleOptionElements}
+      </w-combobox>
       <br>
       <w-combobox
         id="form-submission"
         name="warp-combo-2"
         label="Select a fruit (dynamic)"
-        value="Banana"
+        value="banana"
         placeholder="Type to search..."
-        .options="${sampleOptions}"
-      ></w-combobox>
+      >
+        ${sampleOptionElements}
+      </w-combobox>
         <button type="reset">Reset</button>
         <button type="submit">Submit</button>
     </form>

package/dist/packages/combobox/combobox.test.js

@@ -134,3 +134,113 @@ test('announces suggestion count when opened on focus with empty input', async (
     const statusText = el.shadowRoot?.querySelector('[role="status"]')?.textContent?.trim();
     expect(statusText).toBe('3 suggestions');
 });
+test('renders light-DOM option children in the generated popup', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus>
+      <option value="no">Norway</option>
+      <option value="se">Sweden</option>
+      <option value="dk">Denmark</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    input?.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['Norway', 'Sweden', 'Denmark']);
+});
+test('filters light-DOM options by label attribute and stores option value on select', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus>
+      <option value="us" label="United States">US</option>
+      <option value="uk" label="United Kingdom">UK</option>
+      <option value="no">Norway</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const selectEvents = [];
+    el.addEventListener('select', (event) => selectEvents.push(event));
+    input.focus();
+    input.value = 'United';
+    input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['United States', 'United Kingdom']);
+    visibleOptions?.[1]?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(input.value).toBe('United Kingdom');
+    expect(el.value).toBe('uk');
+    expect(selectEvents.at(-1)?.detail).toEqual({ value: 'uk' });
+});
+test('uses light-DOM options to display an initial value label', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" value="no">
+      <option value="se">Sweden</option>
+      <option value="no">Norway</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    expect(input.value).toBe('Norway');
+    expect(el.value).toBe('no');
+});
+test('syncs dynamic light-DOM option child changes', async () => {
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus>
+      <option value="no">Norway</option>
+      <option value="se">Sweden</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    const denmark = document.createElement('option');
+    denmark.value = 'dk';
+    denmark.textContent = 'Denmark';
+    el.appendChild(denmark);
+    const sweden = el.querySelector('option[value="se"]');
+    sweden?.remove();
+    const norway = el.querySelector('option[value="no"]');
+    norway?.setAttribute('value', 'nor');
+    if (norway) {
+        norway.textContent = 'Norge';
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    input.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['Norge', 'Denmark']);
+});
+test('non-empty options property takes precedence over light-DOM option children', async () => {
+    const options = [{ value: 'apple', label: 'Apple' }];
+    const component = html `
+    <w-combobox data-testid="combobox" open-on-focus .options="${options}">
+      <option value="banana">Banana</option>
+    </w-combobox>
+  `;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    const input = el.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+    input.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const visibleOptions = el.shadowRoot?.querySelectorAll('[role="listbox"] [role="option"]');
+    const optionTexts = Array.from(visibleOptions || []).map((opt) => opt.textContent?.trim());
+    expect(optionTexts).toEqual(['Apple']);
+});