@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/src/components/combobox/combobox.ts

@@ -1,32 +1,27 @@
 import { html, nothing, PropertyValues } from 'lit'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { Ref, createRef, ref } from 'lit/directives/ref.js'
+import { customElement } from 'lit/decorators.js'
+import { ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { repeat } from 'lit/directives/repeat.js'
-import { PktInputElement } from '@/base-elements/input-element'
-import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import specs from 'componentSpecs/combobox.json'
+
+import type {
+  IPktComboboxOption,
+  TPktComboboxTagPlacement,
+  TPktComboboxDisplayValue,
+} from './combobox-types'
+import { findOptionByValue, findOptionIndex } from 'shared-utils/combobox/option-utils'
+import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
+import { slotUtils, optionStateUtils } from './combobox-utils'
+import { ComboboxHandlers } from './combobox-handlers'
 
 import '../input-wrapper'
 import '../icon'
 import '../tag'
 import '../listbox'
-import PktListbox from '../listbox'
-import { TTagSkin } from '../tag'
 
-export interface IPktComboboxOption {
-  description?: string
-  disabled?: boolean
-  fulltext?: string
-  label?: string
-  prefix?: string
-  selected?: boolean
-  tagSkinColor?: TTagSkin
-  userAdded?: boolean
-  value: string
-}
+// Re-export types for backward compatibility
+export type { IPktComboboxOption, TPktComboboxTagPlacement } from './combobox-types'
 
 export interface IPktCombobox {
   allowUserInput?: boolean
@@ -57,10 +52,9 @@ export interface IPktCombobox {
   tagPlacement?: TPktComboboxTagPlacement | null
   tagText?: string | null
   value?: string | string[]
+  isOpen?: boolean
 }
 
-export type TPktComboboxTagPlacement = 'inside' | 'outside'
-
 declare global {
   interface HTMLElementTagNameMap {
     'pkt-combobox': PktCombobox & HTMLSelectElement
@@ -68,57 +62,20 @@ declare global {
 }
 
 @customElement('pkt-combobox')
-export class PktCombobox extends PktInputElement implements IPktCombobox {
-  private helptextSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.optionsController = new PktOptionsSlotController(this)
-    this.slotController = new PktSlotController(this, this.helptextSlot)
-    this.slotController.skipOptions = true
+export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
+  // Bound handler for body click — stored for cleanup in disconnectedCallback
+  private handleBodyClick = (e: MouseEvent) => {
+    if (this._isOptionsOpen && !this.contains(e.target as Node)) {
+      this.closeAndProcessInput()
+    }
   }
 
-  // Props / Attributes
-  @property({ type: String, reflect: true }) value: string | string[] = ''
-  @property({ type: Array }) options: IPktComboboxOption[] = []
-  @property({ type: Array }) defaultOptions: IPktComboboxOption[] = []
-  @property({ type: Boolean }) allowUserInput: boolean = false
-  @property({ type: Boolean }) typeahead: boolean = false
-  @property({ type: Boolean }) includeSearch: boolean = false
-  @property({ type: String }) searchPlaceholder: string = ''
-  @property({ type: Boolean }) multiple: boolean = false
-  @property({ type: Number }) maxlength: number | null = null
-  @property({ type: String }) displayValueAs: string = specs.props.displayValueAs.default
-  @property({ type: String }) tagPlacement: TPktComboboxTagPlacement | null = null
-
-  // State
-  @state() _options: IPktComboboxOption[] = []
-  @state() _value: string[] = [] // Internal value representation
-  @state() private _isOptionsOpen = false
-  @state() private _userInfoMessage: string = ''
-  @state() private _addValueText: string | null = null
-  @state() private _maxIsReached: boolean = false
-  @state() private _search: string = ''
-  @state() private _inputFocus: boolean = false
-  @state() private _editingSingleValue: boolean = false
-
-  // Refs
-  inputRef: Ref<HTMLInputElement> = createRef()
-  arrowRef: Ref<HTMLButtonElement> = createRef()
-  listboxRef: Ref<PktListbox> = createRef()
-  focusRef: Ref<HTMLElement> = createRef()
-  optionTagRef: Ref<HTMLElement> = createRef()
-
   // Lifecycle methods
+
   connectedCallback(): void {
     super.connectedCallback()
 
-    document &&
-      document.body.addEventListener('click', (e: MouseEvent) => {
-        if (this._isOptionsOpen && !this.contains(e.target as Node)) {
-          this.handleFocusOut(e)
-        }
-      })
+    document?.body.addEventListener('click', this.handleBodyClick)
 
     this._options = []
 
@@ -131,50 +88,77 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
 
     // If options are provided via the options slot, we need to extract them
     if (this.optionsController?.nodes && this.optionsController.nodes.length) {
-      const options: IPktComboboxOption[] = []
-      this.optionsController.nodes.forEach((node: Element) => {
-        if (!node.textContent && !node.getAttribute('value')) return null
-        const option: IPktComboboxOption = {
-          value: node.getAttribute('value') || node.textContent || '',
-          label: node.textContent || node.getAttribute('value') || '',
-        }
-        if (node.getAttribute('data-prefix')) {
-          option.prefix = node.getAttribute('data-prefix') || undefined
-        }
-        if (node.getAttribute('tagskincolor')) {
-          option.tagSkinColor = node.getAttribute('tagskincolor') as TTagSkin
-        }
-        if (node.getAttribute('description')) {
-          option.description = node.getAttribute('description') || undefined
-        }
-        option.fulltext = option.value + option.label + (option.prefix || '')
-        options.push(option)
-      })
-      if (options.length) {
-        this.options = [...options]
-        this._options = [...options]
+      const parsedOptions = slotUtils.parseOptionsFromSlot(this.optionsController.nodes)
+      if (parsedOptions.length) {
+        this.options = [...parsedOptions]
+        this._options = [...parsedOptions]
+        this._optionsFromSlot = true
+        this._lastSlotGeneration = this.optionsController.generation
       }
     }
   }
 
-  updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has('_value')) {
-      this.valueChanged(this._value, changedProperties.get('_value') as string[])
+  protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
+    // Re-parse slot options when the controller detects mutations.
+    // The controller increments its generation counter on each mutation, but
+    // doesn't set any reactive properties — so we detect the change here.
+    if (this._optionsFromSlot && this.optionsController) {
+      const currentGen = this.optionsController.generation
+      if (currentGen !== this._lastSlotGeneration) {
+        this._lastSlotGeneration = currentGen
+        const parsedOptions = slotUtils.parseOptionsFromSlot(this.optionsController.nodes)
+        const userAdded = this._options.filter((o) => o.userAdded)
+        this.options = [...userAdded, ...parsedOptions]
+      }
     }
-    if (changedProperties.has('value')) {
-      if (Array.isArray(this.value)) {
-        this._value = this.value
-      } else if (this.value && this.multiple) {
-        this._value = this.value.split(',')
-      } else if (this.value) {
-        this._value = [this.value]
-      } else {
-        this._value = []
+    super.willUpdate(changedProperties)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    document?.body.removeEventListener('click', this.handleBodyClick)
+  }
+
+  firstUpdated(changedProperties: PropertyValues): void {
+    // Apply defaultValue before the base class firstUpdated, which calls
+    // valueChanged(defaultValue) — a no-op in combobox. Setting this.value
+    // here lets updated() handle the sync via the normal value-change path.
+    if (this.defaultValue !== null && !this.value) {
+      this.value = this.defaultValue
+    }
+    super.firstUpdated(changedProperties)
+  }
+
+  updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('isOpen')) {
+      this._isOptionsOpen = this.isOpen
+    }
+
+    // Handle value and _value changes.
+    // Three cases:
+    // 1. value changed from our own syncValueAndDispatch (internal sync) — skip value handler,
+    //    but still process concurrent _value changes
+    // 2. value changed externally — sync _value from value, dispatch events
+    // 3. Only _value changed — sync value from _value, dispatch events
+    const valueChanged = changedProperties.has('value')
+    const internalChanged = changedProperties.has('_value')
+    const isInternalSync = valueChanged && this._internalValueSync
+
+    if (isInternalSync) {
+      this._internalValueSync = false
+      if (internalChanged) {
+        this.syncValueAndDispatch(changedProperties.get('_value') as string[])
       }
-      if (!this.multiple && this._value.length > 1) {
-        this._value = [this._value[0]]
+    } else if (valueChanged) {
+      const oldInternal = [...this._value]
+      const newInternal = this.parseValue()
+      if (newInternal.join(',') !== this._value.join(',')) {
+        this._value = newInternal
       }
-      this.isMaxItemsReached()
+      this.updateMaxReached()
+      this.syncValueAndDispatch(oldInternal)
+    } else if (internalChanged) {
+      this.syncValueAndDispatch(changedProperties.get('_value') as string[])
     }
 
     // If defaultOptions changed, update options (preserving userAdded)
@@ -186,35 +170,22 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     }
 
     if (changedProperties.has('options')) {
-      // If options change, we need to update _options, but we need to preserve userAdded values
-      // Bug fix 2025-09-19: Fetch userAdded from _old_ options to prevent accidental overwrite
       const prevOptions =
         (changedProperties.get('options') as IPktComboboxOption[]) || this._options || []
-      const userAddedValues = prevOptions.filter((option) => option && option.userAdded)
-      const filteredUserAdded = userAddedValues.filter(
-        (userOpt) =>
-          !(Array.isArray(this.options) ? this.options : []).some(
-            (opt) => opt.value === userOpt.value,
-          ),
-      )
-      const mergedOptions = [...filteredUserAdded, ...this.options]
+      const mergedOptions = optionStateUtils.mergeWithUserAdded(this.options, prevOptions)
       this._options = mergedOptions
-      if (filteredUserAdded.length > 0) {
+      if (mergedOptions.length > this.options.length) {
         this.options = mergedOptions
       }
 
-      this._options.forEach((option) => {
-        if (option.value && !option.label) {
-          option.label = option.value
-        }
-        if (option.selected && !this._value.includes(option.value)) {
-          const oldValue = [...this._value]
-          this._value = [...this._value, option.value]
-          this.valueChanged(this._value, oldValue)
-        }
-        option.fulltext = option.value + option.label + (option.prefix || '')
-        option.selected = option.selected || this._value.includes(option.value)
-      })
+      const syncResult = optionStateUtils.syncOptionsWithValues(this._options, this._value)
+      this._options = syncResult.options
+
+      if (syncResult.newValues.length > this._value.length) {
+        const oldValue = [...this._value]
+        this._value = syncResult.newValues
+        this.syncValueAndDispatch(oldValue)
+      }
     }
     if (changedProperties.has('_search')) {
       this.dispatchEvent(
@@ -224,41 +195,83 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         }),
       )
     }
+    // Sync text input display value for single+typeahead when dropdown is closed
+    if (
+      !this._isOptionsOpen &&
+      !this.multiple &&
+      this._hasTextInput &&
+      this.inputRef.value &&
+      this.inputRef.value.type !== 'hidden'
+    ) {
+      const displayValue = this._value[0]
+        ? getSingleValueForInput(this._value[0], this.options, this.displayValueAs)
+        : ''
+      if (this.inputRef.value.value !== displayValue) {
+        this.inputRef.value.value = displayValue
+      }
+    }
+
     super.updated(changedProperties)
   }
 
-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'value') {
-      if (Array.isArray(this.value)) {
-        this._value = this.value
-      } else if (this.value && this.multiple) {
-        this._value = this.value.split(',')
-      } else if (this.value) {
-        this._value = [this.value]
-      } else {
-        this._value = []
-      }
-      if (!this.multiple && this._value.length > 1) {
-        this._value = [this._value[0]]
-      }
+  /**
+   * Override form reset to properly restore combobox state.
+   * The base class deselects all options and sets value/defaultValue, but
+   * combobox needs to re-sync _options with the restored values and clean up
+   * user-added options and UI state.
+   */
+  protected override formResetCallback(): void {
+    this.touched = false
+
+    // Restore value from defaultValue (set by base class firstUpdated from
+    // the initial value attribute, per MDN HTMLInputElement.defaultValue)
+    const resetValue = this.defaultValue || (this.multiple ? '' : '')
+    this.value = resetValue
+    this._value = this.parseValue()
+
+    // Remove user-added options, then re-sync selection state with restored _value.
+    // We must create new arrays because the base class mutates option objects in place.
+    this._options = this._options
+      .filter((o) => !o.userAdded)
+      .map((o) => ({ ...o, selected: this._value.includes(o.value) }))
+    this.options = this.options
+      .filter((o) => !o.userAdded)
+      .map((o) => ({ ...o, selected: this._value.includes(o.value) }))
+
+    // Reset UI state
+    this._search = ''
+    this._isOptionsOpen = false
+    this._userInfoMessage = ''
+    this._addValueText = null
+    this._inputFocus = false
+    this.updateMaxReached()
+
+    if (this.inputRef.value && this.inputRef.value.type !== 'hidden') {
+      this.inputRef.value.value = ''
     }
+
+    this.internals.setFormValue('')
+    this.internals.ariaInvalid = 'false'
+    this.requestUpdate()
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    // Don't set _value here for 'value' changes — this.value hasn't been updated yet
+    // (super.attributeChangedCallback does that). Let updated() handle the sync.
     if (name === 'options') {
       this._options = Array.isArray(this.options) ? [...this.options] : []
-      this._options.forEach((option) => {
-        if (option.value && !option.label) {
-          option.label = option.value
-        }
-        if (option.selected && !this._value.includes(option.value)) {
-          this._value = [...this._value, option.value]
-        }
-        option.fulltext = option.value + option.label + (option.prefix || '')
-      })
+      const syncResult = optionStateUtils.syncOptionsWithValues(this._options, this._value)
+      this._options = syncResult.options
+      if (syncResult.newValues.length > this._value.length) {
+        this._value = syncResult.newValues
+      }
       this._search = ''
     }
     super.attributeChangedCallback(name, _old, value)
   }
 
   // Render methods
+
   render() {
     return html`
       <pkt-input-wrapper
@@ -277,7 +290,8 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
         useWrapper=${this.useWrapper}
-        .forId=${this.allowUserInput || this.typeahead ? this.id + '-input' : this.id + '-arrow'}
+        .forId=${this._hasTextInput ? this.id + '-input' : this.id + '-combobox'}
+        ?hasFieldset=${!this._hasTextInput}
         class="pkt-combobox__wrapper"
         @labelClick=${this.handleInputClick}
       >
@@ -291,10 +305,31 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
               'pkt-combobox__input--error': this.hasError,
               'pkt-combobox__input--disabled': this.disabled,
             })}
-            tabindex="-1"
+            id=${ifDefined(!this._hasTextInput ? `${this.id}-combobox` : undefined)}
+            role=${ifDefined(!this._hasTextInput ? 'combobox' : undefined)}
+            aria-expanded=${ifDefined(
+              !this._hasTextInput ? (this._isOptionsOpen ? 'true' : 'false') : undefined,
+            )}
+            aria-controls=${ifDefined(!this._hasTextInput ? `${this.id}-listbox` : undefined)}
+            aria-haspopup=${ifDefined(!this._hasTextInput ? 'listbox' : undefined)}
+            aria-labelledby=${ifDefined(
+              !this._hasTextInput ? `${this.id}-combobox-label` : undefined,
+            )}
+            aria-activedescendant=${ifDefined(
+              !this._hasTextInput &&
+                this._value[0] &&
+                !!findOptionByValue(this.options, this._value[0])
+                ? `${this.id}-listbox-${findOptionIndex(this._options, this._value[0])}`
+                : undefined,
+            )}
+            aria-description=${ifDefined(this._selectionDescription || undefined)}
+            tabindex=${!this._hasTextInput ? (this.disabled ? '-1' : '0') : '-1'}
             @click=${this.handleInputClick}
+            @keydown=${!this._hasTextInput ? this.handleSelectOnlyKeydown : nothing}
+            ${ref(this.triggerRef)}
           >
-            ${this.placeholder &&
+            ${!this._hasTextInput &&
+            this.placeholder &&
             (!this._value.length || (this.multiple && this.tagPlacement == 'outside')) &&
             !this._inputFocus
               ? html`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
@@ -304,35 +339,14 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
                 ? this.renderSingleOrMultipleValues()
                 : nothing}
             ${this.renderInputField()}
-            <div
-              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
-              @click=${this.handleArrowClick}
-              @keydown=${this.handleArrowClick}
-              id="${this.id}-arrow"
-              ${ref(this.arrowRef)}
-              aria-expanded=${this._isOptionsOpen}
-              aria-controls="${this.id}-listbox"
-              aria-haspopup="listbox"
-              aria-label="Åpne liste"
-              ?disabled=${this.disabled}
-              ?data-disabled=${this.disabled}
-              role="button"
-              tabindex="${this.disabled ? '-1' : '0'}"
-            >
-              <pkt-icon
-                class=${classMap({
-                  'pkt-combobox__arrow-icon': true,
-                  'pkt-combobox__arrow-icon--open': this._isOptionsOpen,
-                })}
-                name="chevron-thin-down"
-              ></pkt-icon>
-            </div>
-            <div
-              ${ref(this.focusRef)}
-              tabindex="-1"
-              @keydown=${this.handleArrowClick}
-              class="pkt-contents"
-            ></div>
+            <pkt-icon
+              class=${classMap({
+                'pkt-combobox__arrow-icon': true,
+                'pkt-combobox__arrow-icon--open': this._isOptionsOpen,
+              })}
+              name="chevron-thin-down"
+              aria-hidden="true"
+            ></pkt-icon>
           </div>
 
           <pkt-listbox
@@ -341,16 +355,17 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
             .isOpen=${this._isOptionsOpen}
             .searchPlaceholder=${this.searchPlaceholder}
             .label="Liste: ${this.label || ''}"
-            ?includeSearch=${this.includeSearch}
-            ?isMultiSelect=${this.multiple}
-            ?allowUserInput=${this.allowUserInput && !this._maxIsReached}
-            ?maxIsReached=${this._maxIsReached}
+            ?include-search=${this.includeSearch}
+            ?is-multi-select=${this.multiple}
+            ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
+            ?max-is-reached=${this._maxIsReached}
             .customUserInput=${ifDefined(this._addValueText)}
             .userMessage=${this._userInfoMessage}
             @search=${this.handleSearch}
             @option-toggle=${this.handleOptionToggled}
             @select-all=${this.addAllOptions}
             @close-options=${() => (this._isOptionsOpen = false)}
+            @tab-close=${() => this.closeAndProcessInput()}
             .searchValue=${this._search || null}
             .maxLength=${this.maxlength || 0}
             ${ref(this.listboxRef)}
@@ -366,7 +381,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     `
   }
 
-  renderInputField() {
+  private renderInputField() {
     return this.typeahead || this.allowUserInput
       ? html`
           <div class="pkt-combobox__input-div combobox__input">
@@ -374,20 +389,31 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
               type="text"
               id="${this.id}-input"
               name=${(this.name || this.id) + '-input'}
+              placeholder=${ifDefined(
+                !this._value.length || (this.multiple && this.tagPlacement === 'outside')
+                  ? this.placeholder
+                  : undefined,
+              )}
               @input=${this.handleInput}
+              @change=${(e: Event) => {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+              }}
               @keydown=${this.handleInputKeydown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
               autocomplete="off"
               role="combobox"
+              aria-expanded=${this._isOptionsOpen ? 'true' : 'false'}
               aria-label=${ifDefined(this.label)}
-              aria-autocomplete=${this.typeahead ? 'both' : 'list'}
+              aria-autocomplete=${this.typeahead ? 'both' : this.allowUserInput ? 'list' : 'none'}
               aria-controls="${this.id}-listbox"
               aria-activedescendant=${ifDefined(
-                this._value[0] && !!this.findValueInOptions(this._value[0])
-                  ? `${this.id}-listbox-${this.findIndexInOptions(this._value[0])}`
+                this._value[0] && !!findOptionByValue(this.options, this._value[0])
+                  ? `${this.id}-listbox-${findOptionIndex(this._options, this._value[0])}`
                   : undefined,
               )}
+              aria-description=${ifDefined(this._selectionDescription || undefined)}
               ${ref(this.inputRef)}
             />
           </div>
@@ -403,39 +429,56 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         `
   }
 
-  renderSingleOrMultipleValues() {
+  private renderSingleOrMultipleValues() {
+    // Single select with text input: value is shown in the input field, not as a span
+    if (!this.multiple && this._hasTextInput) return nothing
+
     const isSingleValueDisplay = !this.multiple
 
-    // enkeltverdi som tekst
-    const singleValueContent = !this._editingSingleValue
-      ? this.renderValueTag(this.findValueInOptions(this._value[0]))
-      : null
-
-    // Multiple vises som tags
-    const multipleValuesContent = repeat(
-      this._value,
-      (value: string) => value,
-      (value: string) => {
-        const option = this.findValueInOptions(value)
-        const tagSkinColor = this.options.find((o) => o.value === value)?.tagSkinColor
-        return html`
-          <pkt-tag
-            skin=${tagSkinColor || 'blue-dark'}
-            ?closeTag=${!this.disabled}
-            @close=${() => this.handleTagRemove(value)}
-          >
-            ${this.renderValueTag(option)}
-          </pkt-tag>
-        `
-      },
-    )
+    // Single value displayed as text (select-only mode)
+    const singleValueContent = this.renderValueTag(findOptionByValue(this.options, this._value[0]))
+
+    // Multiple values displayed as tags, wrapped in a list for accessibility
+    const isOutside = this.tagPlacement === 'outside'
+    const multipleValuesContent = html`
+      <ul role="list" class="pkt-combobox__tag-list">
+        ${repeat(
+          this._value,
+          (value: string) => value,
+          (value: string, index: number) => {
+            const option = findOptionByValue(this.options, value)
+            const tagSkinColor = option?.tagSkinColor
+            return html`
+              <li
+                role="listitem"
+                @click=${isOutside ? nothing : (e: MouseEvent) => e.stopPropagation()}
+                @mousedown=${isOutside ? nothing : (e: MouseEvent) => e.preventDefault()}
+              >
+                <pkt-tag
+                  skin=${tagSkinColor || 'blue-dark'}
+                  ?closeTag=${!this.disabled}
+                  .buttonTabindex=${isOutside ? undefined : -1}
+                  @close=${() => this.handleTagRemove(value)}
+                  @keydown=${isOutside
+                    ? nothing
+                    : (e: KeyboardEvent) => this.handleTagKeydown(e, index)}
+                >
+                  ${this.renderValueTag(option)}
+                </pkt-tag>
+              </li>
+            `
+          },
+        )}
+      </ul>
+    `
 
     return isSingleValueDisplay ? singleValueContent : multipleValuesContent
   }
 
-  renderValueTag(option: IPktComboboxOption | null) {
+  private renderValueTag(option: IPktComboboxOption | null) {
     if (!option) return ''
-    switch (this.displayValueAs) {
+    const displayAs = this.displayValueAs as TPktComboboxDisplayValue
+    switch (displayAs) {
       case 'prefixAndValue':
         return html`<span class="pkt-combobox__value" data-focusfix=${this.id}
           >${option.prefix || ''} ${option.value}</span
@@ -451,523 +494,6 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
         >`
     }
   }
-
-  // Event handlers
-
-  handleInput(e: InputEvent): void {
-    e.stopPropagation()
-    e.stopImmediatePropagation()
-
-    if (this.disabled) return
-
-    this.touched = true
-    const input = e.target as HTMLInputElement
-    this._search = input.value
-    this.checkForMatches()
-
-    if (this.typeahead) {
-      if (this._search) {
-        this._options = this.options.filter((option) =>
-          option.fulltext?.toLowerCase().includes(this._search.toLowerCase()),
-        )
-
-        if (e.inputType !== 'deleteContentBackward') {
-          const matchingOptions = this._options.filter(
-            (option) =>
-              !option.selected &&
-              option.label?.toLowerCase().startsWith(this._search.toLowerCase()),
-          )
-
-          if (
-            matchingOptions.length > 0 &&
-            this.inputRef.value &&
-            this.inputRef.value.type !== 'hidden'
-          ) {
-            const match = matchingOptions[0]
-
-            if (match?.label) {
-              input.value = match.label
-              window.setTimeout(
-                () => input.setSelectionRange(this._search.length, input.value.length),
-                0,
-              )
-              input.selectionDirection = 'backward'
-            }
-          }
-        }
-      } else {
-        this._options = [...this.options]
-      }
-    }
-  }
-
-  private handleFocus(): void {
-    if (this.disabled) return
-
-    if (
-      !this.multiple &&
-      this._value[0] &&
-      this.inputRef.value &&
-      this.inputRef.value.type !== 'hidden'
-    ) {
-      const option = this.findValueInOptions(this._value[0])
-      this._editingSingleValue = true
-      this.inputRef.value.value =
-        this.displayValueAs === 'label' && option?.label ? option.label : this._value[0]
-    }
-    this._inputFocus = true
-    this._search = ''
-    this._options = [...this.options]
-    this._isOptionsOpen = true
-    this.onFocus()
-
-    this.requestUpdate()
-  }
-
-  private handleFocusOut(e: FocusEvent): void {
-    if (this.disabled) return
-
-    // Triggered when focus completely leaves the combobox and its children
-    if (
-      (e.relatedTarget as Element)?.closest('pkt-combobox')?.id !== this.id &&
-      (e.relatedTarget as Element)?.closest('pkt-combobox')?.id !== this.id &&
-      (e.target as Element)?.getAttribute('data-focusfix') !== this.id &&
-      e.relatedTarget !== this.focusRef.value &&
-      e.relatedTarget !== this.inputRef.value &&
-      e.relatedTarget !== this.arrowRef.value &&
-      this._isOptionsOpen
-    ) {
-      this._inputFocus = false
-      this._addValueText = null
-      this._userInfoMessage = ''
-      this._search = ''
-
-      // If value in text input, check if it should be added
-      if (
-        this.inputRef.value &&
-        this.inputRef.value.type !== 'hidden' &&
-        this.inputRef.value.value !== ''
-      ) {
-        const val = this.inputRef.value.value
-        const valInOptions = this.findValueInOptions(val)
-        if (!this._value.includes(val) && !valInOptions) {
-          if (this.allowUserInput) {
-            this.addNewUserValue(val)
-          } else if (!this.multiple) {
-            this.removeValue(this._value[0])
-          }
-        } else if (valInOptions && !this._value.includes(valInOptions.value)) {
-          this.setSelected(valInOptions.value)
-        }
-        this.inputRef.value.value = ''
-      }
-      this._isOptionsOpen = false
-      this.onBlur()
-    }
-  }
-
-  private handleBlur(): void {
-    this._inputFocus = false
-    this._editingSingleValue = false
-    this.onBlur()
-  }
-
-  private handleInputClick(e: MouseEvent): void {
-    if (this.disabled) {
-      e.preventDefault()
-      e.stopImmediatePropagation()
-      return
-    }
-    if (
-      e.currentTarget &&
-      e.currentTarget !== this.arrowRef.value &&
-      this.inputRef.value?.type !== 'hidden'
-    ) {
-      this.inputRef.value?.focus()
-      this.requestUpdate()
-    } else {
-      this.handleArrowClick(e)
-    }
-  }
-
-  private handlePlaceholderClick(e: MouseEvent): void {
-    if (this.disabled) return
-    e.stopPropagation()
-    if (this.inputRef.value && this.inputRef.value.type !== 'hidden') {
-      this.inputRef.value.focus()
-      this._inputFocus = true
-      this.requestUpdate()
-    }
-  }
-
-  private handleArrowClick(e: MouseEvent | KeyboardEvent): void {
-    if (this.disabled) return
-
-    if (e instanceof KeyboardEvent && e.key) {
-      if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowDown') return
-    }
-
-    e.stopImmediatePropagation()
-    e.preventDefault()
-
-    this._isOptionsOpen = !this._isOptionsOpen
-
-    if (this._isOptionsOpen) {
-      this.listboxRef.value?.focusFirstOrSelectedOption()
-    } else {
-      this.arrowRef.value?.focus()
-    }
-  }
-
-  private handleOptionToggled(e: CustomEvent) {
-    this.toggleValue(e.detail)
-  }
-
-  private handleSearch(e: CustomEvent) {
-    e.stopPropagation()
-    this._search = e.detail.toLowerCase()
-  }
-
-  private handleInputKeydown(e: KeyboardEvent): void {
-    switch (e.key) {
-      case ',':
-        if (this.multiple) {
-          e.preventDefault()
-          this.addValue()
-        }
-        break
-      case 'Enter':
-        e.preventDefault()
-        this.addValue()
-        break
-      case 'Backspace':
-        if (!this._search && this.inputRef.value?.type === 'hidden') this.removeLastValue(e)
-        break
-      case 'Tab':
-      case 'ArrowDown':
-        if (!e.shiftKey) {
-          this.listboxRef.value?.focusFirstOrSelectedOption()
-          e.preventDefault()
-        }
-        break
-      case 'Escape':
-        this._isOptionsOpen = false
-        this.arrowRef.value?.focus()
-        e.preventDefault()
-        break
-      default:
-        break
-    }
-  }
-
-  private handleTagRemove(value: string | null): void {
-    this.removeSelected(value)
-  }
-
-  private blurInput(): void {
-    if (this.inputRef.value && this.inputRef.value.matches(':focus')) {
-      this.inputRef.value.blur()
-    }
-  }
-
-  private checkForMatches() {
-    // sjekker om verdiene bruker skriver inn finnes, er valgt eller kan legges til
-    //setter riktig infomelding til bruker
-    const inputValue = this.inputRef.value?.value || this._search || ''
-    const searchValue = inputValue.trim().toLowerCase() || ''
-
-    if (!searchValue) {
-      if (!this.multiple && this._value[0]) {
-        this.removeValue(this._value[0])
-      }
-
-      this.resetComboboxInput(false)
-      return
-    }
-
-    const matchedValues = this._value.find((value) => value.toLowerCase() === searchValue)
-    const matchedOptions: IPktComboboxOption[] = this._options.filter(
-      (option) => option.label?.toLowerCase().includes(searchValue) ?? false,
-    )
-    const matchedOption = matchedOptions.find(
-      (option) =>
-        option.label?.toLowerCase() === searchValue || option.value.toLowerCase() === searchValue,
-    )
-
-    // sett riktig infomelding til bruker
-    switch (true) {
-      case (matchedOptions.length === 0 || !matchedOption) && this.allowUserInput:
-        this._addValueText = inputValue
-        this._userInfoMessage = ''
-        break
-
-      case matchedOptions.length === 0 && !this._options.length && !this.allowUserInput:
-        this._addValueText = null
-        this._userInfoMessage = 'Ingen match i søket'
-        break
-
-      case !!matchedValues:
-        this._addValueText = null
-        this._userInfoMessage = 'Verdien er allerede valgt'
-        break
-
-      case matchedOptions.length > 1:
-        this._addValueText = null
-        this._userInfoMessage = ''
-        break
-
-      default:
-        this._addValueText = null
-        this._userInfoMessage = '' // Default for å fjerne melding
-    }
-  }
-
-  private findValueInOptions(value: string | null): IPktComboboxOption | null {
-    return (
-      this.options.find((option) => {
-        return option.value === value || option.label === value
-      }) || null
-    )
-  }
-
-  private findIndexInOptions(value: string | null): number {
-    return this._options.findIndex((option) => {
-      return option.value === value || option.label === value
-    })
-  }
-
-  private isMaxItemsReached(): boolean {
-    const isReached = this.maxlength !== null && this._value.length >= this.maxlength
-    if (!isReached) {
-      this._maxIsReached = false
-    } else {
-      this._maxIsReached = true
-    }
-    return isReached
-  }
-
-  public toggleValue(value: string | null): void {
-    if (this.disabled) return
-
-    this.touched = true
-    this._userInfoMessage = ''
-    this._addValueText = null
-
-    const valueFromOptions: string | null = this.findValueInOptions(value)?.value || null
-    const isSelected: boolean = this._value.includes(value || valueFromOptions || '')
-    const isInOption: boolean = !!valueFromOptions
-    const isDisabled: boolean = this._options.find((o) => o.value === value)?.disabled || false
-    const isEmpty: boolean = !value?.trim()
-    const isSingle: boolean = !this.multiple
-    const isMultiple: boolean = this.multiple
-    const isMaxItemsReached: boolean = this.isMaxItemsReached()
-
-    let shouldOptionsBeOpen: boolean = false
-    let shouldResetInput: boolean = true
-    let userInfoMessage: string | null = ''
-    let searchValue: string | null = ''
-
-    if (isDisabled) return
-
-    // Dersom ikke i listen og allowUserInput er true
-    if (!isInOption && this.allowUserInput && !isEmpty) {
-      this.addNewUserValue(value)
-      userInfoMessage = 'Ny verdi lagt til'
-      shouldOptionsBeOpen = !isMultiple
-    }
-
-    // Dersom ikke i listen men allowUserInput er false
-    else if (!isInOption && !this.allowUserInput) {
-      if (isSingle && this._value[0]) {
-        this.removeValue(this._value[0])
-      }
-      shouldResetInput = false
-      shouldOptionsBeOpen = true
-      userInfoMessage = 'Ingen treff i søket'
-    }
-
-    // Dersom verdien er valgt allerede
-    else if (isSelected) {
-      this.removeValue(valueFromOptions)
-      shouldOptionsBeOpen = true
-    }
-
-    // Dersom verdien er en tom streng, og det er enkeltvalg
-    else if (isEmpty && isSingle) {
-      this.removeAllSelected()
-      shouldOptionsBeOpen = true
-    }
-
-    // Dersom det er enkeltvalg
-    else if (isSingle) {
-      this._value[0] && this.removeSelected(this._value[0])
-      this.setSelected(valueFromOptions)
-      shouldOptionsBeOpen = false
-      if (this.inputRef.value && this.inputRef.value.type !== 'hidden') {
-        this.inputRef.value.value = ''
-        this.inputRef.value.blur()
-      }
-    }
-
-    // Dersom det er flervalg og mulig å legge til fler
-    else if (isMultiple && !isMaxItemsReached) {
-      this.setSelected(valueFromOptions)
-      shouldOptionsBeOpen = true
-    }
-
-    // Dersom det er flervalg og maks antall er nådd
-    else if (isMultiple && isMaxItemsReached) {
-      this._userInfoMessage = 'Maks antall valg nådd'
-      shouldResetInput = false
-      searchValue = value
-    }
-
-    // Dersom ingen av de over passer
-    else {
-      isSingle && this.removeAllSelected()
-      this._userInfoMessage = 'Ingen gyldig verdi valgt'
-      shouldResetInput = false
-      shouldOptionsBeOpen = true
-      searchValue = value
-    }
-
-    this._isOptionsOpen = shouldOptionsBeOpen
-    if (!shouldOptionsBeOpen) {
-      window.setTimeout(() => {
-        this.focusRef.value?.focus()
-      }, 0)
-    }
-    this._userInfoMessage = userInfoMessage
-    this._search = searchValue || ''
-    this.resetComboboxInput(shouldResetInput)
-    isMultiple && this.isMaxItemsReached()
-  }
-
-  private setSelected(value: string | null): void {
-    if (this._value.includes(value as string)) return
-
-    if (this.multiple && this.isMaxItemsReached()) {
-      this._userInfoMessage = 'Maks antall valg nådd'
-      return
-    }
-
-    !this.multiple && this.removeAllSelected()
-
-    this._value = value ? [...this._value, value] : this._value
-    this._options = this._options.map((option) => {
-      if (option.value === value) {
-        option.selected = true
-      }
-      return option
-    })
-
-    this.resetComboboxInput(true)
-  }
-
-  private removeSelected(value: string | null): void {
-    if (!value) return
-    this._value = this._value.filter((v) => v !== value)
-    const _opt = this.findValueInOptions(value)
-    if (_opt) {
-      _opt.selected = false
-      if (_opt.userAdded) {
-        this._options = [...this._options.filter((o) => o.value !== value)]
-        this.options = [...this.options.filter((o) => o.value !== value)]
-      } else {
-        this._options = [...this._options, _opt]
-      }
-    } else if (!value && !this.multiple) {
-      this._options = this._options.map((option) => {
-        option.selected = false
-        return option
-      })
-    }
-  }
-
-  private addAllOptions(): void {
-    if (!this.multiple) return
-    if (this.maxlength && this._options.length > this.maxlength) {
-      this._userInfoMessage = 'For mange valgt'
-      return
-    }
-
-    this._value = this._options.map((option) => option.value)
-    this._options = this._options.map((option) => {
-      option.selected = true
-      return option
-    })
-    this.requestUpdate()
-  }
-
-  private removeAllSelected(): void {
-    this._value = []
-    this._options = this._options.map((option) => {
-      option.selected = false
-      return option
-    })
-    this._options = this._options.filter((option) => !option.userAdded)
-    this.requestUpdate()
-  }
-
-  private addValue(): void {
-    const input = this.inputRef.value?.value.trim() || ''
-    this._search = input
-    this.toggleValue(input)
-  }
-
-  private removeValue(value: string | null): void {
-    this._value = this.multiple ? this._value.filter((v) => v !== value) : []
-    this.removeSelected(value)
-  }
-
-  private addNewUserValue(value: string | null): void {
-    if (!value || value.trim() === '') return
-
-    if (!this.multiple) {
-      this._value[0] && this.removeSelected(this._value[0])
-      this._value = [value]
-      this._isOptionsOpen = false
-      this.blurInput()
-    } else if (!this.findValueInOptions(value)) {
-      if (this.isMaxItemsReached()) return
-      this._value = [...this._value, value]
-    }
-
-    const newOption: IPktComboboxOption = { value, label: value, userAdded: true }
-
-    this.options = [newOption, ...this.options]
-    this._options = [newOption, ...this._options]
-    this.setSelected(value)
-    this.requestUpdate()
-  }
-
-  private resetComboboxInput(shouldResetInput: boolean = true): void {
-    this._addValueText = null
-    if (this.inputRef.value && this.inputRef.value.type !== 'hidden' && shouldResetInput) {
-      this._search = ''
-      if (this.multiple) {
-        this.inputRef.value.value = ''
-      } else {
-        const option = this.findValueInOptions(this._value[0])
-        window.setTimeout(() => {
-          if (!this.inputRef.value || this.inputRef.value.type === 'hidden') return
-          this.inputRef.value.value =
-            this.displayValueAs === 'label' && option?.label ? option.label : this._value[0] || ''
-        }, 0)
-        this._userInfoMessage = ''
-      }
-    }
-    this._options = [...this.options]
-  }
-
-  private removeLastValue(e: Event): void {
-    if (this._value.length === 0) return
-
-    e.preventDefault()
-
-    const val = this._value[this._value.length - 1]
-    val && this.removeSelected(val)
-
-    this.isMaxItemsReached()
-  }
 }
+
+export default PktCombobox