@oslokommune/punkt-elements 20.1.0 → 20.1.3

package/src/components/datepicker/datepicker-utils.test.ts

@@ -4,11 +4,11 @@ import {
   inputTypeUtils,
   formUtils,
   calendarUtils,
-  eventUtils,
   cssUtils,
   dateProcessingUtils,
   keyboardUtils,
 } from './datepicker-utils'
+import { completeRangeWithTo } from 'shared-utils/datepicker-utils'
 import { createRef } from 'lit/directives/ref.js'
 
 const mockIsIOS = vi.hoisted(() => vi.fn(() => false))
@@ -132,53 +132,6 @@ describe('datepicker-utils', () => {
         expect(fallback).toHaveBeenCalledOnce()
       })
     })
-
-    describe('validateDateInput', () => {
-      it('should return early if input has no value', () => {
-        const input = { value: '' } as HTMLInputElement
-        const internals = { setValidity: vi.fn() }
-        formUtils.validateDateInput(input, internals)
-        expect(internals.setValidity).not.toHaveBeenCalled()
-      })
-
-      it('should set rangeUnderflow validity when value is below minimum', () => {
-        const input = { value: '2024-01-01' } as HTMLInputElement
-        const internals = { setValidity: vi.fn() }
-        const messages = { dateUnderflow: 'Too early' }
-
-        formUtils.validateDateInput(input, internals, '2024-01-10', null, messages)
-        expect(internals.setValidity).toHaveBeenCalledWith(
-          { rangeUnderflow: true },
-          'Too early',
-          input,
-        )
-      })
-
-      it('should set rangeOverflow validity when value is above maximum', () => {
-        const input = { value: '2024-01-31' } as HTMLInputElement
-        const internals = { setValidity: vi.fn() }
-        const messages = { dateOverflow: 'Too late' }
-
-        formUtils.validateDateInput(input, internals, null, '2024-01-20', messages)
-        expect(internals.setValidity).toHaveBeenCalledWith(
-          { rangeOverflow: true },
-          'Too late',
-          input,
-        )
-      })
-
-      it('should use default messages when strings not provided', () => {
-        const input = { value: '2024-01-01' } as HTMLInputElement
-        const internals = { setValidity: vi.fn() }
-
-        formUtils.validateDateInput(input, internals, '2024-01-10', null)
-        expect(internals.setValidity).toHaveBeenCalledWith(
-          { rangeUnderflow: true },
-          'For tidlig dato',
-          input,
-        )
-      })
-    })
   })
 
   describe('calendarUtils', () => {
@@ -270,127 +223,33 @@ describe('datepicker-utils', () => {
         calendarUtils.handleCalendarPosition(popupRef, inputRef, true)
         expect(mockPopup.style.top).toBe('calc(100% - 30px)')
       })
-    })
-  })
-
-  describe('eventUtils', () => {
-    describe('createDocumentClickListener', () => {
-      it('should return a function', () => {
-        const listener = eventUtils.createDocumentClickListener(
-          createRef() as any,
-          null,
-          createRef() as any,
-          () => true,
-          vi.fn(),
-          vi.fn(),
-        )
-        expect(typeof listener).toBe('function')
-      })
-
-      it('should call onBlur and hideCalendar when clicking outside', () => {
-        const onBlur = vi.fn()
-        const hideCalendar = vi.fn()
-        const inputRef = { value: { contains: () => false } } as any
-        const btnRef = { value: { contains: () => false } } as any
-
-        const listener = eventUtils.createDocumentClickListener(
-          inputRef,
-          null,
-          btnRef,
-          () => true,
-          onBlur,
-          hideCalendar,
-        )
-
-        const event = {
-          target: document.createElement('div'),
-        } as any
-
-        listener(event)
-        expect(onBlur).toHaveBeenCalledOnce()
-        expect(hideCalendar).toHaveBeenCalledOnce()
-      })
-
-      it('should not call handlers when clicking inside input', () => {
-        const onBlur = vi.fn()
-        const hideCalendar = vi.fn()
-        const inputRef = { value: { contains: () => true } } as any
-        const btnRef = { value: { contains: () => false } } as any
-
-        const listener = eventUtils.createDocumentClickListener(
-          inputRef,
-          null,
-          btnRef,
-          () => true,
-          onBlur,
-          hideCalendar,
-        )
-
-        const event = {
-          target: document.createElement('div'),
-        } as any
-
-        listener(event)
-        expect(onBlur).not.toHaveBeenCalled()
-        expect(hideCalendar).not.toHaveBeenCalled()
-      })
-    })
 
-    describe('createDocumentKeydownListener', () => {
-      it('should return a function', () => {
-        const listener = eventUtils.createDocumentKeydownListener(() => true, vi.fn())
-        expect(typeof listener).toBe('function')
-      })
-
-      it('should call hideCalendar on Escape key', () => {
-        const hideCalendar = vi.fn()
-        const listener = eventUtils.createDocumentKeydownListener(() => true, hideCalendar)
-
-        const event = { key: 'Escape' } as KeyboardEvent
-        listener(event)
-        expect(hideCalendar).toHaveBeenCalledOnce()
-      })
-
-      it('should not call hideCalendar if calendar is not open', () => {
-        const hideCalendar = vi.fn()
-        const listener = eventUtils.createDocumentKeydownListener(() => false, hideCalendar)
-
-        const event = { key: 'Escape' } as KeyboardEvent
-        listener(event)
-        expect(hideCalendar).not.toHaveBeenCalled()
-      })
-
-      it('should not call hideCalendar on other keys', () => {
-        const hideCalendar = vi.fn()
-        const listener = eventUtils.createDocumentKeydownListener(() => true, hideCalendar)
-
-        const event = { key: 'Enter' } as KeyboardEvent
-        listener(event)
-        expect(hideCalendar).not.toHaveBeenCalled()
-      })
-    })
+      describe('with the popup margin', () => {
+        const position = (inputTop: number) => {
+          const popup = document.createElement('div')
+          popup.style.marginTop = '8px'
+          popup.getBoundingClientRect = () => ({ height: 300 }) as DOMRect
+          document.body.appendChild(popup)
+          const input = {
+            getBoundingClientRect: () => ({ height: 40, top: inputTop }),
+            parentElement: null,
+          }
+          calendarUtils.handleCalendarPosition({ value: popup } as any, { value: input } as any)
+          popup.remove()
+          return popup.style.top
+        }
 
-    describe('handleFocusOut', () => {
-      it('should call onBlur and hideCalendar when focus leaves element', () => {
-        const onBlur = vi.fn()
-        const hideCalendar = vi.fn()
-        const element = { contains: () => false } as any
-        const event = { target: document.createElement('div') } as any
+        it('flips above when the margin pushes the popup off screen', () => {
+          expect(position(window.innerHeight - 40 - 300 - 4)).toBe('calc(100% - 356px)')
+        })
 
-        eventUtils.handleFocusOut(event, element, onBlur, hideCalendar)
-        expect(onBlur).toHaveBeenCalledOnce()
-        expect(hideCalendar).toHaveBeenCalledOnce()
-      })
+        it('stays below when the popup and margin fit', () => {
+          expect(position(window.innerHeight - 40 - 300 - 8)).toBe('100%')
+        })
 
-      it('should not call handlers when focus stays within element', () => {
-        const onBlur = vi.fn()
-        const hideCalendar = vi.fn()
-        const element = { contains: () => true } as any
-        const event = { target: document.createElement('div') } as any
-
-        eventUtils.handleFocusOut(event, element, onBlur, hideCalendar)
-        expect(onBlur).not.toHaveBeenCalled()
-        expect(hideCalendar).not.toHaveBeenCalled()
+        it('stays below when there is no room above either', () => {
+          expect(position(200)).toBe('100%')
+        })
       })
     })
   })
@@ -561,49 +420,27 @@ describe('datepicker-utils', () => {
         expect(manageValidity).not.toHaveBeenCalled()
       })
     })
+  })
 
-    describe('processRangeBlur', () => {
-      it('should call manageValidity and handleDateSelect when target has value', () => {
-        const target = { value: '2024-01-15' } as any
-        const event = { target } as any
-        const mockCalendar = { handleDateSelect: vi.fn() }
-        const calendarRef = { value: mockCalendar } as any
-        const clearInputValue = vi.fn()
-        const manageValidity = vi.fn()
-
-        dateProcessingUtils.processRangeBlur(
-          event,
-          ['2024-01-10', '2024-01-20'],
-          calendarRef,
-          clearInputValue,
-          manageValidity,
-        )
+  describe('completeRangeWithTo', () => {
+    it('completes the range with a waiting to-date', () => {
+      expect(completeRangeWithTo(['2026-11-03'], '2026-11-12')).toEqual(['2026-11-03', '2026-11-12'])
+    })
 
-        expect(manageValidity).toHaveBeenCalledWith(target)
-        expect(clearInputValue).not.toHaveBeenCalled()
-        expect(mockCalendar.handleDateSelect).toHaveBeenCalled()
-      })
+    it('allows a one-day range', () => {
+      expect(completeRangeWithTo(['2026-11-12'], '2026-11-12')).toEqual(['2026-11-12', '2026-11-12'])
+    })
 
-      it('should clear input value when target is empty but values[0] exists', () => {
-        const target = { value: '' } as any
-        const event = { target } as any
-        const mockCalendar = { handleDateSelect: vi.fn() }
-        const calendarRef = { value: mockCalendar } as any
-        const clearInputValue = vi.fn()
-        const manageValidity = vi.fn()
+    it('keeps the selection when the date comes after the to-date', () => {
+      expect(completeRangeWithTo(['2026-11-20'], '2026-11-12')).toEqual(['2026-11-20'])
+    })
 
-        dateProcessingUtils.processRangeBlur(
-          event,
-          ['2024-01-10'],
-          calendarRef,
-          clearInputValue,
-          manageValidity,
-        )
+    it('keeps the selection when an excluded date lies in between', () => {
+      expect(completeRangeWithTo(['2026-11-03'], '2026-11-12', ['2026-11-06'])).toEqual(['2026-11-03'])
+    })
 
-        expect(clearInputValue).toHaveBeenCalled()
-        expect(manageValidity).not.toHaveBeenCalled()
-        expect(mockCalendar.handleDateSelect).not.toHaveBeenCalled()
-      })
+    it('keeps the selection when there is no to-date', () => {
+      expect(completeRangeWithTo(['2026-11-03'], null)).toEqual(['2026-11-03'])
     })
   })
 

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

@@ -1,7 +1,6 @@
-import { fromISOToDate, newDate } from 'shared-utils/date-utils'
+import { newDate } from 'shared-utils/date-utils'
 import { Ref } from 'lit/directives/ref.js'
 import { PktCalendar } from '@/components/calendar/calendar'
-import { nb, type TPktStrings } from 'shared-strings'
 import {
   validateRangeOrder,
   sortDates,
@@ -45,7 +44,7 @@ export const inputTypeUtils = {
 type TFormOwner = { form?: Pick<HTMLFormElement, 'requestSubmit'> | null }
 
 /**
- * Form and validation utilities (Lit-specific — uses ElementInternals)
+ * Form utilities (Lit-specific — uses ElementInternals)
  */
 export const formUtils = {
   submitForm(element: HTMLElement & { internals?: TFormOwner }): void {
@@ -63,25 +62,6 @@ export const formUtils = {
       fallbackAction()
     }
   },
-
-  validateDateInput(
-    input: HTMLInputElement,
-    internals: Pick<ElementInternals, 'setValidity'>,
-    min?: string | null,
-    max?: string | null,
-    messages?: Partial<TPktStrings['validation']>,
-  ): void {
-    const value = input.value
-    if (!value) return
-
-    const validation = { ...nb.validation, ...messages }
-
-    if (min && min > value) {
-      internals.setValidity({ rangeUnderflow: true }, validation.dateUnderflow, input)
-    } else if (max && max < value) {
-      internals.setValidity({ rangeOverflow: true }, validation.dateOverflow, input)
-    }
-  },
 }
 
 /**
@@ -124,58 +104,6 @@ export const calendarUtils = {
   },
 }
 
-/**
- * Event handling utilities (Lit-specific — uses Lit Ref types)
- */
-export const eventUtils = {
-  createDocumentClickListener(
-    inputRef: Ref<HTMLInputElement>,
-    inputRefTo: Ref<HTMLInputElement> | null,
-    btnRef: Ref<HTMLButtonElement>,
-    getCalendarOpen: () => boolean,
-    onBlur: () => void,
-    hideCalendar: () => void,
-  ): (e: MouseEvent) => void {
-    return (e: MouseEvent) => {
-      if (
-        inputRef?.value &&
-        btnRef?.value &&
-        !inputRef.value.contains(e.target as Node) &&
-        !(inputRefTo?.value && inputRefTo.value.contains(e.target as Node)) &&
-        !btnRef.value.contains(e.target as Node) &&
-        !(e.target as Element).closest('.pkt-calendar-popup') &&
-        getCalendarOpen()
-      ) {
-        onBlur()
-        hideCalendar()
-      }
-    }
-  },
-
-  createDocumentKeydownListener(
-    getCalendarOpen: () => boolean,
-    hideCalendar: () => void,
-  ): (e: KeyboardEvent) => void {
-    return (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && getCalendarOpen()) {
-        hideCalendar()
-      }
-    }
-  },
-
-  handleFocusOut(
-    event: FocusEvent,
-    element: HTMLElement,
-    onBlur: () => void,
-    hideCalendar: () => void,
-  ): void {
-    if (!element.contains(event.target as Node)) {
-      onBlur()
-      hideCalendar()
-    }
-  },
-}
-
 /**
  * CSS class utilities
  * Delegates to shared-utils/datepicker-utils
@@ -189,7 +117,7 @@ export const cssUtils = {
 /**
  * Date value processing utilities
  * processDateSelection delegates to shared-utils.
- * updateInputValues and processRangeBlur stay Lit-specific (use Lit Ref).
+ * updateInputValues stays Lit-specific (uses Lit Ref).
  */
 export const dateProcessingUtils = {
   processDateSelection: sharedProcessDateSelection,
@@ -214,25 +142,6 @@ export const dateProcessingUtils = {
       manageValidity(inputRef.value)
     }
   },
-
-  processRangeBlur(
-    event: Event,
-    values: string[],
-    calendarRef: Ref<PktCalendar>,
-    clearInputValue: () => void,
-    manageValidity: (input: HTMLInputElement) => void,
-  ): void {
-    const target = event.target as HTMLInputElement
-    if (target.value) {
-      manageValidity(target)
-      const date = fromISOToDate(target.value)
-      if (date) {
-        calendarRef?.value?.handleDateSelect(date)
-      }
-    } else if (values[0]) {
-      clearInputValue()
-    }
-  },
 }
 
 /**

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

@@ -85,9 +85,9 @@ describe('PktDatepicker', () => {
       })
 
       const input = datepicker.querySelector('input') as HTMLInputElement
-      fireEvent.focus(input)
+      input.focus()
       await datepicker.updateComplete
-      fireEvent.blur(input)
+      input.blur()
       await datepicker.updateComplete
 
       expect(focusEventFired).toBe(true)

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

@@ -10,6 +10,7 @@ import '../calendar/calendar'
 import { PktDatepicker } from './datepicker'
 import { PktCalendar } from '../calendar/calendar'
 import { PktDatepickerPopup } from './datepicker-popup'
+import type { PktInputWrapper } from '../input-wrapper/input-wrapper'
 
 const waitForCustomElements = async () => {
   await customElements.whenDefined('pkt-datepicker')
@@ -140,6 +141,10 @@ describe('PktDatepicker', () => {
       expect(datepicker.range).toBe(false)
       expect(datepicker.maxlength).toBe(null)
       expect(datepicker.showRangeLabels).toBe(false)
+      expect(datepicker.dateformat).toBe('dd.MM.yyyy')
+      expect(datepicker.weeknumbers).toBe(false)
+      expect(datepicker.withcontrols).toBe(false)
+      expect(datepicker.calendarOpen).toBe(false)
     })
 
     test('handles value property correctly', async () => {
@@ -194,6 +199,237 @@ describe('PktDatepicker', () => {
       expect(label?.textContent).toContain(testLabel)
     })
 
+    describe('counter', () => {
+      const counterFor = async (attributes: string) => {
+        const container = await createDatepicker(attributes)
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+        const wrapper = datepicker.querySelector('pkt-input-wrapper') as PktInputWrapper
+        await wrapper.updateComplete
+        return datepicker.querySelector('.pkt-input__counter')
+      }
+
+      test('shows the counter for multiple dates with a limit', async () => {
+        expect(await counterFor('multiple maxlength="3"')).toBeTruthy()
+      })
+
+      test('hides the counter when counter is false', async () => {
+        expect(await counterFor('multiple maxlength="3" counter="false"')).toBeNull()
+      })
+
+      test('shows the counter when counter is set without a limit', async () => {
+        expect(await counterFor('counter')).toBeTruthy()
+      })
+
+      test('shows no counter when maxlength is 0', async () => {
+        expect(await counterFor('multiple maxlength="0"')).toBeNull()
+      })
+    })
+
+    test('keeps the input enabled when maxlength is 0', async () => {
+      const container = await createDatepicker('multiple maxlength="0"')
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.querySelector('input.pkt-datepicker__input')).not.toHaveAttribute('disabled')
+    })
+
+    describe('focus and blur', () => {
+      const setup = async (attributes = '') => {
+        const container = await createDatepicker(attributes)
+        const outside = container.appendChild(document.createElement('button'))
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+        const events: string[] = []
+        datepicker.addEventListener('focus', () => events.push('focus'))
+        datepicker.addEventListener('blur', () => events.push('blur'))
+        const input = datepicker.querySelector('input.pkt-datepicker__input') as HTMLInputElement
+        const button = datepicker.querySelector('.pkt-datepicker__calendar-button') as HTMLElement
+        return { datepicker, input, button, outside, events }
+      }
+
+      test('fires one focus and one blur per visit, however focus moves inside', async () => {
+        const { input, button, outside, events } = await setup()
+        input.focus()
+        button.focus()
+        input.focus()
+        outside.focus()
+
+        expect(events).toEqual(['focus', 'blur'])
+      })
+
+      test('ignores focus events while focus is already inside', async () => {
+        const { input, events } = await setup()
+        input.focus()
+        input.dispatchEvent(
+          new FocusEvent('focusin', { bubbles: true, relatedTarget: document.createElement('span') }),
+        )
+
+        expect(events).toEqual(['focus'])
+      })
+
+      test('returns focus to the field after picking a date', async () => {
+        const { datepicker, input, button, events } = await setup(
+          'today="2026-11-09" currentmonth="2026-11-01"',
+        )
+        input.focus()
+        fireEvent.click(button)
+        const popup = datepicker.querySelector('pkt-datepicker-popup') as PktDatepickerPopup
+        await popup.updateComplete
+        await (popup.calendarRef.value as PktCalendar).updateComplete
+        const date = datepicker.querySelector(
+          '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+        ) as HTMLElement
+        date.focus()
+        fireEvent.click(date)
+        await datepicker.updateComplete
+
+        expect(document.activeElement).toBe(input)
+        expect(events).toEqual(['focus'])
+      })
+    })
+
+    describe('emptying range fields', () => {
+      const setup = async (value = '2026-11-05,2026-11-12') => {
+        const container = await createDatepicker(
+          `id="dp" range value="${value}" today="2026-11-09" currentmonth="2026-11-01"`,
+        )
+        const outside = container.appendChild(document.createElement('button'))
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+        const from = datepicker.querySelector('#dp-input') as HTMLInputElement
+        const to = datepicker.querySelector('#dp-to') as HTMLInputElement
+        const type = async (input: HTMLInputElement, text: string, next: HTMLElement) => {
+          input.focus()
+          input.value = text
+          next.focus()
+          await datepicker.updateComplete
+        }
+        const pick = async (date: string) => {
+          fireEvent.click(datepicker.querySelector('.pkt-datepicker__calendar-button')!)
+          const popup = datepicker.querySelector('pkt-datepicker-popup') as PktDatepickerPopup
+          await popup.updateComplete
+          await (popup.calendarRef.value as PktCalendar).updateComplete
+          fireEvent.click(datepicker.querySelector(`[data-date="${date}"]`)!)
+          await datepicker.updateComplete
+          return popup
+        }
+        return { datepicker, from, to, outside, type, pick }
+      }
+
+      test('keeps the from-date when the to-date is emptied', async () => {
+        const { datepicker, from, to, outside, type } = await setup()
+        const changes: string[] = []
+        const valueChanges: unknown[] = []
+        datepicker.addEventListener('change', () => changes.push(datepicker.value))
+        datepicker.addEventListener('value-change', (e) =>
+          valueChanges.push((e as CustomEvent).detail),
+        )
+        await type(to, '', outside)
+
+        expect([from.value, to.value]).toEqual(['2026-11-05', ''])
+        expect(datepicker.value).toBe('2026-11-05')
+        expect(valueChanges).toEqual([['2026-11-05']])
+        expect(changes).toEqual([])
+      })
+
+      test('keeps the to-date in its field while focus stays inside', async () => {
+        const { datepicker, from, to, type } = await setup()
+        await type(from, '', to)
+
+        expect([from.value, to.value]).toEqual(['', '2026-11-12'])
+        expect(datepicker.value).toBe('')
+      })
+
+      test('clears a to-date with no from-date when focus leaves', async () => {
+        const { datepicker, from, to, outside, type } = await setup()
+        await type(from, '', to)
+        outside.focus()
+        await datepicker.updateComplete
+
+        expect([from.value, to.value]).toEqual(['', ''])
+        expect(datepicker.value).toBe('')
+      })
+
+      test('completes the range when a new from-date is typed', async () => {
+        const { datepicker, from, to, outside, type } = await setup()
+        await type(from, '', to)
+        await type(from, '2026-11-03', outside)
+
+        expect([from.value, to.value]).toEqual(['2026-11-03', '2026-11-12'])
+        expect(datepicker.value).toBe('2026-11-03,2026-11-12')
+      })
+
+      test('keeps a to-date typed before the from-date', async () => {
+        const { datepicker, from, to, outside, type } = await setup('')
+        await type(to, '2026-11-12', from)
+
+        expect([from.value, to.value]).toEqual(['', '2026-11-12'])
+
+        await type(from, '2026-11-03', outside)
+
+        expect(datepicker.value).toBe('2026-11-03,2026-11-12')
+      })
+
+      test('completes the range when a from-date is picked in the calendar', async () => {
+        const { datepicker, from, to, type, pick } = await setup()
+        await type(from, '', to)
+        const popup = await pick('2026-11-03')
+
+        expect([from.value, to.value]).toEqual(['2026-11-03', '2026-11-12'])
+        expect(datepicker.value).toBe('2026-11-03,2026-11-12')
+        expect(popup.open).toBe(false)
+      })
+
+      test('shows only complete parts of the range in the calendar while typing', async () => {
+        const { datepicker, from, to } = await setup()
+        fireEvent.click(datepicker.querySelector('.pkt-datepicker__calendar-button')!)
+        const popup = datepicker.querySelector('pkt-datepicker-popup') as PktDatepickerPopup
+        await popup.updateComplete
+        const calendar = popup.calendarRef.value as PktCalendar
+        const edit = async (input: HTMLInputElement, text: string) => {
+          input.value = text
+          input.dispatchEvent(new Event('input', { bubbles: true }))
+          await datepicker.updateComplete
+          await popup.updateComplete
+          return calendar.selected
+        }
+
+        expect(await edit(from, '')).toEqual([])
+        expect(await edit(from, '2026-11-03')).toEqual(['2026-11-03', '2026-11-12'])
+        expect(await edit(to, '')).toEqual(['2026-11-03'])
+      })
+
+      test('starts a new range when the picked date comes after the to-date', async () => {
+        const { datepicker, from, to, type, pick } = await setup()
+        await type(from, '', to)
+        await pick('2026-11-20')
+
+        expect([from.value, to.value]).toEqual(['2026-11-20', ''])
+        expect(datepicker.value).toBe('2026-11-20')
+      })
+    })
+
+    describe('calendar position', () => {
+      const popupTopAfterOpening = async (attributes: string) => {
+        const container = await createDatepicker(attributes)
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+        fireEvent.click(datepicker.querySelector('.pkt-datepicker__calendar-button')!)
+        const popup = datepicker.querySelector('.pkt-calendar-popup') as HTMLElement
+        await vi.waitFor(() => expect(popup.style.top).not.toBe(''))
+        return popup.style.top
+      }
+
+      test('places the popup below the field when it opens', async () => {
+        expect(await popupTopAfterOpening('')).toBe('100%')
+      })
+
+      test('places the popup above the counter when there is one', async () => {
+        expect(await popupTopAfterOpening('multiple maxlength="3"')).toBe('calc(100% - 30px)')
+      })
+    })
+
     test('handles dateformat property correctly', async () => {
       const customFormat = 'MM/dd/yyyy'
       const container = await createDatepicker(