@oslokommune/punkt-elements 18.7.0 → 18.7.2

package/src/components/combobox/combobox-base.ts

@@ -27,14 +27,15 @@ export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' |
   @property({ type: Boolean, attribute: 'allow-user-input' }) allowUserInput: boolean = false
   @property({ type: Boolean }) typeahead: boolean = false
   @property({ type: Boolean, attribute: 'include-search' }) includeSearch: boolean = false
-  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder: string = ''
+  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder: string | null =
+    null
   @property({ type: Boolean }) multiple: boolean = false
   @property({ type: Number }) maxlength: number | null = null
   @property({ type: String, attribute: 'display-value-as' }) displayValueAs: string =
     specs.props.displayValueAs.default
   @property({ type: String, attribute: 'tag-placement' })
   tagPlacement: TPktComboboxTagPlacement | null = null
-  // Internal use only — syncs to _isOptionsOpen in updated(), but does not
+  // Internal use only — syncs to _isOptionsOpen in willUpdate(), but does not
   // reliably open the listbox as a declarative attribute (requires focus state
   // and populated _options). Not part of the public API / component spec.
   // Used in tests to set initial open state without relying on focus or options population.
@@ -45,14 +46,15 @@ export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' |
   @state() protected _value: string[] = []
   @state() protected _isOptionsOpen = false
   @state() protected _userInfoMessage: TComboboxMessageKey = ''
+  @state() protected _messageValue: string | null = null
   @state() protected _addValueText: string | null = null
   @state() protected _maxIsReached: boolean = false
   @state() protected _search: string = ''
   @state() protected _inputFocus: boolean = false
-  protected _internalValueSync = false
+  @state() protected _skipInputTab: boolean = false
   protected _optionsFromSlot = false
   protected _lastSlotGeneration = 0
-  /** When true, the next handleFocus call will not reopen the dropdown. */
+  /** Set when focus returns to the input on close, so handleFocus does not reopen the list. */
   protected _suppressNextOpen = false
 
   // Refs
@@ -69,10 +71,7 @@ export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' |
     return `${this._value.length} valgt`
   }
 
-  /**
-   * Focuses the appropriate trigger element after closing the listbox.
-   * Select-only: the combobox input div. Editable: the text input.
-   */
+  /** Returns focus to the combobox after the listbox closes without a selection. */
   protected focusTrigger(): void {
     if (this._hasTextInput) {
       this.inputRef.value?.focus()
@@ -81,18 +80,35 @@ export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' |
     }
   }
 
+  protected focusAfterCommit(): void {
+    // The input sits inside the wrapper, so Tab would step back into it.
+    // Written to the DOM directly so it lands before focus moves.
+    this._skipInputTab = true
+    const input = this.inputRef.value
+    if (input && input.type !== 'hidden') input.setAttribute('tabindex', '-1')
+    this.triggerRef.value?.focus()
+  }
+
+  protected restoreInputTab(): void {
+    this._skipInputTab = false
+  }
+
   /**
    * Parses the value prop into an internal string array.
    */
   protected parseValue(): string[] {
-    if (Array.isArray(this.value)) {
-      return this.multiple ? this.value : this.value.length > 0 ? [this.value[0]] : []
+    return this.parseToValues(this.value)
+  }
+
+  protected parseToValues(raw: string | string[] | null | undefined): string[] {
+    if (Array.isArray(raw)) {
+      return this.multiple ? raw : raw.length > 0 ? [raw[0]] : []
     }
-    if (this.value && this.multiple) {
-      return this.value.split(',')
+    if (raw && this.multiple) {
+      return raw.split(',')
     }
-    if (this.value) {
-      return [this.value]
+    if (raw) {
+      return [raw]
     }
     return []
   }
@@ -104,26 +120,26 @@ export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' |
     this._maxIsReached = isMaxSelectionReached(this._value.length, this.maxlength)
   }
 
+  protected _pendingDispatchFrom: string[] | null = null
+
   /**
-   * Syncs the public value property from internal _value state and dispatches
-   * events if the value content changed. Always sets this.value as a string
-   * to prevent array→string reflect cascades.
+   * Syncs the public value property from internal _value state. Always assigns
+   * a string to prevent array→string reflect cascades.
    */
-  protected syncValueAndDispatch(oldInternal: string[]): void {
-    const newInternal = this._value
-
-    // Sync public value as a string (avoids array→string attribute reflect cascade)
-    const newPublicStr = this.multiple ? newInternal.join(',') : newInternal[0] || ''
+  protected syncPublicValue(): void {
+    const newPublicStr = this.multiple ? this._value.join(',') : this._value[0] || ''
     const currentPublicStr = Array.isArray(this.value)
       ? this.value.join(',')
       : String(this.value || '')
 
     if (newPublicStr !== currentPublicStr) {
-      this._internalValueSync = true
       this.value = newPublicStr
     }
+  }
+
+  protected dispatchValueChange(oldInternal: string[]): void {
+    const newInternal = this._value
 
-    // Dispatch events if value content changed
     if (oldInternal?.join(',') !== newInternal.join(',')) {
       const eventValue = this.multiple ? [...newInternal] : newInternal[0] || ''
       this.onChange(eventValue)
@@ -147,9 +163,7 @@ export class ComboboxBase extends PktInputElement<IPktStringsProps<'combobox' |
    * No-op override of the base class valueChanged.
    * The base class version sets both this.value AND this._value, which creates
    * an infinite _value → valueChanged → value → parseValue → _value loop.
-   * Combobox handles value sync and event dispatch in syncValueAndDispatch() instead.
+   * Combobox derives value in willUpdate() and dispatches in updated() instead.
    */
-  protected override valueChanged(): void {
-    // Intentionally empty — combobox manages value sync in updated()
-  }
+  protected override valueChanged(): void {}
 }

package/src/components/combobox/combobox-handlers.ts

@@ -43,7 +43,7 @@ export class ComboboxHandlers extends ComboboxValue {
           input.selectionDirection = 'backward'
         }
       } else {
-        this._options = [...this.options]
+        this.refreshOptionsFromValue()
       }
     }
   }
@@ -51,8 +51,8 @@ export class ComboboxHandlers extends ComboboxValue {
   protected handleFocus(): void {
     if (this.disabled) return
 
-    // After selecting a value in single+typeahead, focus returns to the input.
-    // Skip reopening the dropdown so screen readers announce the selected value.
+    this._skipInputTab = false
+
     if (this._suppressNextOpen) {
       this._suppressNextOpen = false
       this._inputFocus = true
@@ -74,20 +74,26 @@ export class ComboboxHandlers extends ComboboxValue {
     }
     this._inputFocus = true
     this._search = ''
-    this._options = [...this.options]
+    this.refreshOptionsFromValue()
     this._isOptionsOpen = true
     this.onFocus()
 
     this.requestUpdate()
   }
 
+  protected handleCloseOptions(): void {
+    this._isOptionsOpen = false
+    if (this._hasTextInput) this._suppressNextOpen = true
+    this.focusTrigger()
+  }
+
   protected handleFocusOut(e: FocusEvent): void {
     if (this.disabled || !this._isOptionsOpen) return
 
     const related = e.relatedTarget as Element | null
     const isFocusInsideCombobox =
       related?.closest('pkt-combobox')?.id === this.id ||
-      (e.target as Element)?.getAttribute('data-focusfix') === this.id ||
+      (e.target as Element)?.classList?.contains('pkt-combobox__value') ||
       related === this.inputRef.value ||
       related === this.triggerRef.value
 

package/src/components/combobox/combobox-utils.ts

@@ -91,6 +91,11 @@ export const slotUtils = {
 // Options state synchronization (Lit-specific, in-place mutation)
 
 export const optionStateUtils = {
+  /** Copies options before the component writes to them, so selection state does not leak into the consumer's array. */
+  cloneOptions(options: IPktComboboxOption[]): IPktComboboxOption[] {
+    return Array.isArray(options) ? options.map((option) => ({ ...option })) : []
+  },
+
   /**
    * Ensures options have labels and fulltext set.
    * Also syncs selected state with current values.
@@ -124,8 +129,11 @@ export const optionStateUtils = {
   mergeWithUserAdded(
     newOptions: IPktComboboxOption[],
     previousOptions: IPktComboboxOption[],
+    values: string[],
   ): IPktComboboxOption[] {
-    const userAddedValues = previousOptions.filter((option) => option?.userAdded && option.selected)
+    const userAddedValues = previousOptions.filter(
+      (option) => option?.userAdded && values.includes(option.value),
+    )
     const filteredUserAdded = userAddedValues.filter(
       (userOpt) =>
         !(Array.isArray(newOptions) ? newOptions : []).some((opt) => opt.value === userOpt.value),

package/src/components/combobox/combobox-value.ts

@@ -1,7 +1,11 @@
-import type { IPktComboboxOption } from './combobox-types'
-import { findOptionByValue, isMaxSelectionReached } from 'shared-utils/combobox/option-utils'
+import type { IPktComboboxOption, TPktComboboxDisplayValue } from './combobox-types'
+import {
+  findOptionByValue,
+  getOptionDisplayText,
+  isMaxSelectionReached,
+} from 'shared-utils/combobox/option-utils'
 import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
-import { selectionMutators } from './combobox-utils'
+import { optionStateUtils, selectionMutators } from './combobox-utils'
 import { ComboboxBase } from './combobox-base'
 import type { TComboboxMessageKey } from 'shared-utils/combobox'
 
@@ -29,6 +33,7 @@ export class ComboboxValue extends ComboboxBase {
     let shouldOptionsBeOpen: boolean = false
     let shouldResetInput: boolean = true
     let userInfoMessage: TComboboxMessageKey = ''
+    let messageValue: string | null = null
     let searchValue: string | null = ''
 
     if (isDisabled) return
@@ -76,6 +81,14 @@ export class ComboboxValue extends ComboboxBase {
       this._value[0] && this.removeSelected(this._value[0])
       this.setSelected(valueFromOptions)
       shouldOptionsBeOpen = false
+      userInfoMessage = 'valueSelected'
+      // The two modes resolve displayValueAs through different helpers.
+      messageValue = this._hasTextInput
+        ? getSingleValueForInput(valueFromOptions || '', this.options, this.displayValueAs)
+        : getOptionDisplayText(
+            findOptionByValue(this.options, valueFromOptions),
+            this.displayValueAs as TPktComboboxDisplayValue,
+          )
     }
 
     // Multi-select with room for more selections
@@ -102,19 +115,15 @@ export class ComboboxValue extends ComboboxBase {
 
     this._isOptionsOpen = shouldOptionsBeOpen
     if (!shouldOptionsBeOpen) {
-      if (isSingle && this._hasTextInput) {
-        // Suppress the next handleFocus from reopening the dropdown,
-        // then move focus back to the text input so screen readers
-        // announce the selected value instead of the browser window.
-        this._suppressNextOpen = true
-      }
       window.setTimeout(() => {
-        this.focusTrigger()
+        this.focusAfterCommit()
       }, 0)
     }
-    this._userInfoMessage = userInfoMessage
     this._search = searchValue || ''
     this.resetComboboxInput(shouldResetInput)
+    // After resetComboboxInput, which clears any stale message in single mode.
+    this._userInfoMessage = userInfoMessage
+    this._messageValue = messageValue
     isMultiple && this.updateMaxReached()
   }
 
@@ -208,17 +217,24 @@ export class ComboboxValue extends ComboboxBase {
 
     if (!this.multiple) {
       this._isOptionsOpen = false
-      if (this._hasTextInput) {
-        this._suppressNextOpen = true
-      }
       window.setTimeout(() => {
-        this.focusTrigger()
+        this.focusAfterCommit()
       }, 0)
     }
 
     this.requestUpdate()
   }
 
+  /**
+   * Rebuilds _options from the consumer's options array. Selection lives in
+   * _value, not in this.options, so it has to be reapplied here.
+   */
+  protected refreshOptionsFromValue(): void {
+    const cloned = optionStateUtils.cloneOptions(this.options)
+    cloned.forEach((option) => (option.selected = this._value.includes(option.value)))
+    this._options = optionStateUtils.syncOptionsWithValues(cloned, this._value).options
+  }
+
   protected resetComboboxInput(shouldResetInput: boolean = true): void {
     this._addValueText = null
     if (this.inputRef.value && this.inputRef.value.type !== 'hidden' && shouldResetInput) {
@@ -233,7 +249,7 @@ export class ComboboxValue extends ComboboxBase {
         this.inputRef.value.value = ''
       }
     }
-    this._options = [...this.options]
+    this.refreshOptionsFromValue()
   }
 
   protected removeLastValue(e: Event): void {

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

@@ -6,6 +6,7 @@ expect.extend(toHaveNoViolations)
 
 import './combobox'
 import { PktCombobox } from './combobox'
+import type { PktListbox } from '../listbox/listbox'
 import type { IPktComboboxOption } from './combobox'
 
 const waitForCustomElements = async () => {
@@ -175,7 +176,14 @@ describe('PktCombobox', () => {
       await combobox.updateComplete
 
       const textInput = combobox.querySelector('input[type="text"]')
-      expect(textInput?.getAttribute('aria-activedescendant')).toBeTruthy()
+      expect(textInput).not.toHaveAttribute('aria-activedescendant')
+
+      combobox.isOpen = true
+      await combobox.updateComplete
+
+      const active = textInput?.getAttribute('aria-activedescendant')
+      expect(active).toBeTruthy()
+      expect(combobox.querySelector(`[id="${active}"]`)).not.toBeNull()
     })
 
     test('listbox has correct id for aria-controls reference', async () => {
@@ -183,8 +191,26 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const listbox = combobox.querySelector('pkt-listbox')
-      expect(listbox?.getAttribute('id')).toBe('test-combo-listbox')
+      const controller = combobox.querySelector('[aria-controls]')
+      const target = controller?.getAttribute('aria-controls')
+      expect(target).toBe('test-combo-listbox')
+      expect(combobox.querySelectorAll(`[id="${target}"]`).length).toBe(1)
+      expect(combobox.querySelector('pkt-listbox')?.hasAttribute('id')).toBe(false)
+    })
+
+    test('aria-controls still resolves after the combobox id changes', async () => {
+      const container = await createCombobox('id="test-combo" name="test" label="Test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      combobox.id = 'renamed-combo'
+      await combobox.updateComplete
+      await (combobox.querySelector('pkt-listbox') as PktListbox).updateComplete
+
+      const controller = combobox.querySelector('[aria-controls]')
+      const target = controller?.getAttribute('aria-controls')
+      expect(target).toBe('renamed-combo-listbox')
+      expect(combobox.querySelectorAll(`[id="${target}"]`).length).toBe(1)
     })
   })
 

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

@@ -0,0 +1,82 @@
+import '@testing-library/jest-dom'
+
+import spec from 'componentSpecs/combobox.json'
+import './combobox'
+import { PktCombobox } from './combobox'
+
+/**
+ * Attribute spelling -> the property it drives, with a value to set and the
+ * value the property should end up with. Mirrors IPktComboboxAttributes, and is
+ * checked against a live element so the spellings cannot drift.
+ */
+const cases: { attribute: string; property: keyof PktCombobox; set: string; expect: unknown }[] = [
+  { attribute: 'allow-user-input', property: 'allowUserInput', set: '', expect: true },
+  { attribute: 'include-search', property: 'includeSearch', set: '', expect: true },
+  { attribute: 'haserror', property: 'hasError', set: '', expect: true },
+  { attribute: 'optionaltag', property: 'optionalTag', set: '', expect: true },
+  { attribute: 'requiredtag', property: 'requiredTag', set: '', expect: true },
+  { attribute: 'display-value-as', property: 'displayValueAs', set: 'value', expect: 'value' },
+  { attribute: 'search-placeholder', property: 'searchPlaceholder', set: 'x', expect: 'x' },
+  { attribute: 'tag-placement', property: 'tagPlacement', set: 'outside', expect: 'outside' },
+  { attribute: 'defaultvalue', property: 'defaultValue', set: 'x', expect: 'x' },
+  { attribute: 'errormessage', property: 'errorMessage', set: 'x', expect: 'x' },
+  { attribute: 'helptextdropdown', property: 'helptextDropdown', set: 'x', expect: 'x' },
+  {
+    attribute: 'helptextdropdownbutton',
+    property: 'helptextDropdownButton',
+    set: 'x',
+    expect: 'x',
+  },
+  { attribute: 'optionaltext', property: 'optionalText', set: 'x', expect: 'x' },
+  { attribute: 'requiredtext', property: 'requiredText', set: 'x', expect: 'x' },
+  { attribute: 'tagtext', property: 'tagText', set: 'x', expect: 'x' },
+  { attribute: 'hasfieldset', property: 'hasFieldset', set: 'true', expect: true },
+  { attribute: 'usewrapper', property: 'useWrapper', set: 'false', expect: false },
+  {
+    attribute: 'default-options',
+    property: 'defaultOptions',
+    set: '[{"value":"a"}]',
+    expect: [{ value: 'a' }],
+  },
+]
+
+const mount = async (attribute: string, value: string) => {
+  const container = document.createElement('div')
+  container.innerHTML = `<pkt-combobox id="a" name="a" label="L" ${attribute}="${value}"></pkt-combobox>`
+  document.body.appendChild(container)
+  await customElements.whenDefined('pkt-combobox')
+  const combobox = container.querySelector('pkt-combobox') as PktCombobox
+  await combobox.updateComplete
+  return combobox
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCombobox attributes', () => {
+  test.each(cases)(
+    '$attribute sets the $property property',
+    async ({ attribute, property, set, expect: expected }) => {
+      const combobox = await mount(attribute, set)
+
+      expect(combobox[property]).toEqual(expected)
+    },
+  )
+
+  test('kebab-case spellings of lowercased attributes do not work', async () => {
+    const combobox = await mount('has-error', '')
+
+    expect(combobox.hasError).toBe(false)
+  })
+
+  test('every renamed attribute in the component spec is declared', () => {
+    const renamed = Object.entries(spec.props)
+      .filter(([name, prop]) => 'attribute' in prop && prop.attribute !== name)
+      .map(([, prop]) => (prop as { attribute: string }).attribute)
+      // input-size and data-testid come from the shared input wrapper, not combobox
+      .filter((attribute) => !['input-size', 'data-testid'].includes(attribute))
+
+    expect(cases.map((c) => c.attribute).sort()).toEqual(renamed.sort())
+  })
+})

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

@@ -730,7 +730,14 @@ describe('PktCombobox', () => {
       await combobox.updateComplete
 
       const textInput = combobox.querySelector('input[type="text"]')
-      expect(textInput?.getAttribute('aria-activedescendant')).toBe('test-listbox--1')
+      expect(textInput).not.toHaveAttribute('aria-activedescendant')
+
+      combobox.isOpen = true
+      await combobox.updateComplete
+
+      const active = textInput?.getAttribute('aria-activedescendant')
+      expect(active).toBe('test-listbox-0')
+      expect(combobox.querySelector(`[id="${active}"]`)).not.toBeNull()
     })
   })
 
@@ -825,4 +832,42 @@ describe('PktCombobox', () => {
       expect(combobox['_options'].some((o: IPktComboboxOption) => o.value === 'c')).toBe(false)
     })
   })
+
+  describe('Consumer-owned options array', () => {
+    const mount = async (options: unknown[], value?: string) => {
+      const el = document.createElement('pkt-combobox') as PktCombobox
+      el.label = 'Velg'
+      ;(el as unknown as { options: unknown[] }).options = options
+      if (value) el.value = value
+      document.body.appendChild(el)
+      await waitForCustomElements()
+      await el.updateComplete
+      return el
+    }
+
+    test('does not mutate the array passed in', async () => {
+      const shared = [
+        { value: 'a', text: 'Alfa' },
+        { value: 'b', text: 'Bravo' },
+      ]
+      const before = JSON.stringify(shared)
+
+      await mount(shared, 'b')
+
+      expect(JSON.stringify(shared)).toBe(before)
+    })
+
+    test('two comboboxes do not share selection via the same options array', async () => {
+      const shared = [
+        { value: 'a', text: 'Alfa' },
+        { value: 'b', text: 'Bravo' },
+      ]
+
+      await mount(shared, 'b')
+      const second = await mount(shared)
+
+      expect(second.value).toBe('')
+    })
+  })
+
 })