Fix select chevron popup trigger

Author: SharonStrats

src/v2/components/forms/combobox/Combobox.test.ts

@@ -135,6 +135,28 @@ describe('SolidUICombobox', () => {
     })
   })
 
+  it('opens the popup when clicking the dropdown toggle button', async () => {
+    const combobox = new Combobox()
+    combobox.options = [
+      { label: 'Alice', value: 'alice' },
+      { label: 'Bob', value: 'bob' }
+    ]
+
+    document.body.appendChild(combobox)
+    await combobox.updateComplete
+
+    const toggle = combobox.shadowRoot?.querySelector('button.dropdown-toggle') as HTMLButtonElement
+
+    expect(toggle).not.toBeNull()
+
+    toggle.click()
+    await combobox.updateComplete
+
+    const input = combobox.shadowRoot?.querySelector('input.text-input') as HTMLInputElement
+    expect(input.getAttribute('aria-expanded')).toBe('true')
+    expect(getPortalRoot()?.querySelector('[role="listbox"]')).not.toBeNull()
+  })
+
   it('supports keyboard selection from the input', async () => {
     const combobox = new Combobox()
     const changed = jest.fn()

src/v2/components/forms/select/Select.test.ts

@@ -88,6 +88,29 @@ describe('SolidUISelect', () => {
     expect(changed).toHaveBeenCalledWith({ value: 'fr' })
   })
 
+  it('opens the popup when clicking the visible trigger toggle', async () => {
+    const select = new Select()
+    select.label = 'Language'
+    select.options = [
+      { label: 'English', value: 'en' },
+      { label: 'French', value: 'fr' }
+    ]
+
+    document.body.appendChild(select)
+    await select.updateComplete
+
+    const toggle = select.shadowRoot?.querySelector('.select-trigger-toggle') as HTMLSpanElement
+
+    expect(toggle).not.toBeNull()
+
+    toggle.click()
+    await select.updateComplete
+
+    const trigger = select.shadowRoot?.querySelector('button.select-trigger') as HTMLButtonElement
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+    expect(getPortalRoot()?.querySelector('[role="listbox"]')).not.toBeNull()
+  })
+
   it('renders the selected option first in the popup', async () => {
     const select = new Select()
     select.options = [

src/v2/components/forms/select/Select.ts

@@ -145,6 +145,7 @@ export class Select extends LitElement {
 
       .select-trigger {
         display: block;
+        position: relative;
         width: 100%;
         min-width: 0;
         min-height: var(--select-trigger-height, var(--min-touch-target, 44px));
@@ -562,12 +563,12 @@ export class Select extends LitElement {
           <span class="select-trigger-label" part="trigger-label"
             >${triggerLabel}</span
           >
+          <span class="select-trigger-toggle" part="trigger-toggle">
+            <span class="select-trigger-icon" part="trigger-icon" aria-hidden="true"
+              >${downArrowIcon}</span
+            >
+          </span>
         </button>
-        <span class="select-trigger-toggle" part="trigger-toggle">
-          <span class="select-trigger-icon" part="trigger-icon" aria-hidden="true"
-            >${downArrowIcon}</span
-          >
-        </span>
       </div>
 
       <div