@oslokommune/punkt-elements 18.7.1 → 18.7.2

package/src/components/combobox/combobox.interaction.test.ts

@@ -175,6 +175,37 @@ describe('PktCombobox', () => {
       expect(input.value).toBe('Apple')
     })
 
+    test('closes the list when focus leaves the combobox', async () => {
+      const outside = document.createElement('button')
+      document.body.appendChild(outside)
+
+      const container = await createCombobox('id="test" name="test" label="Test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.isOpen = true
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(true)
+
+      const trigger = combobox.querySelector('[role="combobox"]') as HTMLElement
+      trigger.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outside }))
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(false)
+    })
+
+    test('keeps the list open when focus moves within the combobox', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.isOpen = true
+      await combobox.updateComplete
+
+      const trigger = combobox.querySelector('[role="combobox"]') as HTMLElement
+      trigger.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: trigger }))
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(true)
+    })
+
     test('handles blur correctly', async () => {
       const container = await createCombobox('id="test" name="test" label="Test" allow-user-input')
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
@@ -271,6 +302,142 @@ describe('PktCombobox', () => {
     })
   })
 
+  describe('Focus on open', () => {
+    const openAndSettle = async (combobox: PktCombobox) => {
+      const arrowButton = combobox.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      await combobox.updateComplete
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    }
+
+    test('moves focus to the first option when the dropdown opens', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [...defaultOptions]
+      await combobox.updateComplete
+
+      await openAndSettle(combobox)
+
+      const active = document.activeElement as HTMLElement
+      expect(active?.getAttribute('role')).toBe('option')
+      expect(active?.dataset.value).toBe('apple')
+    })
+
+    test('moves focus to the selected option when the dropdown opens', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test" value="cherry"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [...defaultOptions]
+      await combobox.updateComplete
+
+      await openAndSettle(combobox)
+
+      const active = document.activeElement as HTMLElement
+      expect(active?.getAttribute('role')).toBe('option')
+      expect(active?.dataset.value).toBe('cherry')
+    })
+  })
+
+  describe('Focus after committing a value', () => {
+    const commit = async (combobox: PktCombobox, typed: string) => {
+      const input = combobox.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(input)
+      await combobox.updateComplete
+      input.value = typed
+      fireEvent.input(input)
+      await combobox.updateComplete
+      fireEvent.keyDown(input, { key: 'Enter' })
+      await combobox.updateComplete
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    }
+
+    test('moves focus out of the text input after adding a user value', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test" allow-user-input')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [...defaultOptions]
+      await combobox.updateComplete
+
+      await commit(combobox, 'NewFruit')
+
+      const input = combobox.querySelector('input[type="text"]')
+      expect(document.activeElement).not.toBe(input)
+      expect(document.activeElement).toBe(combobox.querySelector('.pkt-combobox__input'))
+      expect(combobox['_isOptionsOpen']).toBe(false)
+    })
+
+    test('moves focus out of the text input after selecting a typeahead match', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test" typeahead')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [...defaultOptions]
+      await combobox.updateComplete
+
+      await commit(combobox, 'apple')
+
+      const input = combobox.querySelector('input[type="text"]')
+      expect(document.activeElement).not.toBe(input)
+      expect(document.activeElement).toBe(combobox.querySelector('.pkt-combobox__input'))
+      expect(combobox['_value']).toContain('apple')
+    })
+  })
+
+  describe('Selection announcement', () => {
+    const liveText = (container: HTMLElement) =>
+      container.querySelector('[aria-live="polite"]')?.textContent?.trim()
+
+    test('announces the displayed label, not the form value', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test" typeahead')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [{ value: 'NO', label: 'Norge' }]
+      await combobox.updateComplete
+
+      const input = combobox.querySelector('input[type="text"]') as HTMLInputElement
+      input.focus()
+      input.value = 'NO'
+      fireEvent.input(input)
+      await combobox.updateComplete
+      fireEvent.keyDown(input, { key: 'Enter' })
+      await combobox.updateComplete
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      expect(input.value).toBe('Norge')
+      expect(liveText(container)).toBe('Norge er valgt')
+    })
+
+    test('announces the raw value when displayValueAs is value', async () => {
+      const container = await createCombobox(
+        'id="test" name="test" label="Test" typeahead display-value-as="value"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [{ value: 'NO', label: 'Norge' }]
+      await combobox.updateComplete
+
+      const input = combobox.querySelector('input[type="text"]') as HTMLInputElement
+      input.focus()
+      input.value = 'NO'
+      fireEvent.input(input)
+      await combobox.updateComplete
+      fireEvent.keyDown(input, { key: 'Enter' })
+      await combobox.updateComplete
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      expect(liveText(container)).toBe('NO er valgt')
+    })
+
+    test('announces the prefix in select-only mode, matching the display', async () => {
+      const container = await createCombobox(
+        'id="test" name="test" label="Test" display-value-as="prefixAndValue"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = [{ value: 'NO', label: 'Norge', prefix: '+47' }]
+      await combobox.updateComplete
+
+      combobox.toggleValue('NO')
+      await combobox.updateComplete
+
+      expect(combobox.querySelector('.pkt-combobox__value')?.textContent?.trim()).toBe('+47 NO')
+      expect(liveText(container)).toBe('+47 NO er valgt')
+    })
+  })
+
   describe('Search and filtering', () => {
     test('filters options when typing in typeahead mode', async () => {
       const container = await createCombobox('id="test" name="test" label="Test" typeahead')

package/src/components/combobox/combobox.preselection.test.ts

@@ -0,0 +1,271 @@
+import '@testing-library/jest-dom'
+
+import './combobox'
+import { PktCombobox } from './combobox'
+import type { IPktComboboxOption } from './combobox'
+
+const bydeler: IPktComboboxOption[] = [
+  { value: 'bfr', label: 'Frogner' },
+  { value: 'bga', label: 'Grünerløkka' },
+  { value: 'bsa', label: 'Sagene' },
+  { value: 'bgo', label: 'Gamle Oslo' },
+]
+
+const createCombobox = async (attrs: string, options?: IPktComboboxOption[]) => {
+  const container = document.createElement('div')
+  container.innerHTML = `<pkt-combobox ${attrs}></pkt-combobox>`
+  document.body.appendChild(container)
+  await customElements.whenDefined('pkt-combobox')
+  const combobox = container.querySelector('pkt-combobox') as PktCombobox
+  if (options) combobox.options = options.map((o) => ({ ...o }))
+  await combobox.updateComplete
+  return combobox
+}
+
+/** Values the listbox renders as selected. */
+const selectedInList = (combobox: PktCombobox) =>
+  Array.from(combobox.querySelectorAll('[role="option"]'))
+    .filter((el) => el.getAttribute('aria-selected') === 'true')
+    .map((el) => el.getAttribute('data-value'))
+
+const tagLabels = (combobox: PktCombobox) =>
+  Array.from(combobox.querySelectorAll('pkt-tag')).map((el) => el.textContent?.trim())
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCombobox preselection', () => {
+  describe('Preselected via the value attribute', () => {
+    test('marks the preselected options in both the tag list and the listbox', async () => {
+      const combobox = await createCombobox(
+        'id="t" name="t" label="L" multiple tag-placement="outside" value="bfr,bga,bsa"',
+        bydeler,
+      )
+
+      expect(combobox['_value']).toEqual(['bfr', 'bga', 'bsa'])
+      expect(selectedInList(combobox)).toEqual(['bfr', 'bga', 'bsa'])
+      expect(tagLabels(combobox)).toHaveLength(3)
+    })
+
+    test('keeps the existing selection in the listbox when another option is picked', async () => {
+      const combobox = await createCombobox(
+        'id="t" name="t" label="L" multiple tag-placement="outside" value="bfr,bga,bsa"',
+        bydeler,
+      )
+
+      combobox.toggleValue('bgo')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bfr', 'bga', 'bsa', 'bgo'])
+      expect(selectedInList(combobox)).toEqual(['bfr', 'bga', 'bsa', 'bgo'])
+      expect(tagLabels(combobox)).toHaveLength(4)
+    })
+
+    test('keeps the listbox in sync when an option is deselected', async () => {
+      const combobox = await createCombobox(
+        'id="t" name="t" label="L" multiple value="bfr,bga,bsa"',
+        bydeler,
+      )
+
+      combobox.toggleValue('bga')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bfr', 'bsa'])
+      expect(selectedInList(combobox)).toEqual(['bfr', 'bsa'])
+    })
+  })
+
+  describe('Preselected via options.selected', () => {
+    test('seeds the value from options marked selected', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L" multiple typeahead', [
+        { value: 'HODEPINE', selected: true },
+        { value: 'KVALME' },
+        { value: 'INGEN', selected: true },
+      ])
+
+      expect(combobox['_value']).toEqual(['HODEPINE', 'INGEN'])
+      expect(selectedInList(combobox)).toEqual(['HODEPINE', 'INGEN'])
+      expect(tagLabels(combobox)).toHaveLength(2)
+    })
+
+    test('adds to the preselected values rather than replacing them', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L" multiple typeahead', [
+        { value: 'HODEPINE', selected: true },
+        { value: 'KVALME' },
+        { value: 'INGEN', selected: true },
+      ])
+
+      combobox.toggleValue('KVALME')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['HODEPINE', 'INGEN', 'KVALME'])
+      expect(selectedInList(combobox)).toEqual(['HODEPINE', 'KVALME', 'INGEN'])
+      expect(tagLabels(combobox)).toHaveLength(3)
+    })
+
+    test('takes only the first preselected option in single-select mode', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L"', [
+        { value: 'HODEPINE', selected: true },
+        { value: 'KVALME' },
+      ])
+
+      expect(combobox['_value']).toEqual(['HODEPINE'])
+    })
+  })
+
+  describe('Preselected via defaultValue', () => {
+    test('seeds the value from defaultValue', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L" multiple', bydeler)
+      combobox.defaultValue = ['bfr', 'bga']
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bfr', 'bga'])
+      expect(selectedInList(combobox)).toEqual(['bfr', 'bga'])
+      expect(tagLabels(combobox)).toHaveLength(2)
+    })
+
+    test('lets value take precedence over defaultValue', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L" multiple value="bsa"', bydeler)
+      combobox.defaultValue = ['bfr', 'bga']
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bsa'])
+    })
+
+    test('does not reapply defaultValue after the selection is cleared', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L" multiple', bydeler)
+      combobox.defaultValue = ['bfr']
+      await combobox.updateComplete
+      expect(combobox['_value']).toEqual(['bfr'])
+
+      combobox.toggleValue('bfr')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual([])
+      expect(selectedInList(combobox)).toEqual([])
+    })
+
+    test('restores defaultValue on form reset', async () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<form><pkt-combobox id="t" name="t" label="L" multiple></pkt-combobox></form>`
+      document.body.appendChild(container)
+      await customElements.whenDefined('pkt-combobox')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = bydeler.map((o) => ({ ...o }))
+      combobox.defaultValue = ['bfr']
+      await combobox.updateComplete
+
+      combobox.toggleValue('bga')
+      await combobox.updateComplete
+      expect(combobox['_value']).toEqual(['bfr', 'bga'])
+      ;(container.querySelector('form') as HTMLFormElement).reset()
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bfr'])
+    })
+  })
+
+  describe('Form reset', () => {
+    const mountInForm = async (attrs: string, options: IPktComboboxOption[]) => {
+      const container = document.createElement('div')
+      container.innerHTML = `<form><pkt-combobox ${attrs}></pkt-combobox></form>`
+      document.body.appendChild(container)
+      await customElements.whenDefined('pkt-combobox')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = options.map((o) => ({ ...o }))
+      await combobox.updateComplete
+      const form = container.querySelector('form') as HTMLFormElement
+      return { combobox, form }
+    }
+
+    test('clears a selected option', async () => {
+      const { combobox, form } = await mountInForm('id="t" name="t" label="L" multiple', bydeler)
+      combobox.toggleValue('bfr')
+      await combobox.updateComplete
+
+      form.reset()
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual([])
+      expect(tagLabels(combobox)).toHaveLength(0)
+    })
+
+    test('clears a user-added value', async () => {
+      const { combobox, form } = await mountInForm(
+        'id="t" name="t" label="L" multiple allow-user-input',
+        bydeler,
+      )
+      combobox.toggleValue('egendefinert')
+      await combobox.updateComplete
+      expect(combobox['_value']).toEqual(['egendefinert'])
+
+      form.reset()
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual([])
+      expect(tagLabels(combobox)).toHaveLength(0)
+      expect(combobox.options.some((option) => option.userAdded)).toBe(false)
+    })
+
+    test('clears a user-added value alongside a selected option', async () => {
+      const { combobox, form } = await mountInForm(
+        'id="t" name="t" label="L" multiple allow-user-input',
+        bydeler,
+      )
+      combobox.toggleValue('bfr')
+      await combobox.updateComplete
+      combobox.toggleValue('egendefinert')
+      await combobox.updateComplete
+      expect(combobox['_value']).toEqual(['bfr', 'egendefinert'])
+
+      form.reset()
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual([])
+      expect(selectedInList(combobox)).toEqual([])
+    })
+  })
+
+  describe('Selection state after picking an option', () => {
+    test('marks the option in the listbox on the first click', async () => {
+      const combobox = await createCombobox(
+        'id="t" name="t" label="L" multiple maxlength="3" include-search',
+        bydeler,
+      )
+
+      combobox.toggleValue('bfr')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bfr'])
+      expect(selectedInList(combobox)).toEqual(['bfr'])
+      expect(tagLabels(combobox)).toHaveLength(1)
+    })
+
+    test('keeps value and listbox in sync across repeated toggles', async () => {
+      const combobox = await createCombobox('id="t" name="t" label="L" multiple', bydeler)
+
+      for (const value of ['bfr', 'bga', 'bfr', 'bsa']) {
+        combobox.toggleValue(value)
+        await combobox.updateComplete
+      }
+
+      expect(combobox['_value']).toEqual(['bga', 'bsa'])
+      expect(selectedInList(combobox)).toEqual(['bga', 'bsa'])
+      expect(tagLabels(combobox)).toHaveLength(2)
+    })
+
+    test('keeps selection when all options are preselected', async () => {
+      const combobox = await createCombobox(
+        'id="t" name="t" label="L" multiple value="bfr,bga,bsa,bgo"',
+        bydeler,
+      )
+
+      combobox.toggleValue('bfr')
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['bga', 'bsa', 'bgo'])
+      expect(selectedInList(combobox)).toEqual(['bga', 'bsa', 'bgo'])
+    })
+  })
+})