@operato/popup 10.29.49 → 10.29.52

package/test/ox-popup-list-search.test.ts

@@ -0,0 +1,71 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/ox-popup-list.js'
+import type { OxPopupList } from '../src/ox-popup-list.js'
+
+/**
+ * A searchable list is a select with a search box on top. It opened with the focus on an option, so the user had to
+ * click the box before typing, and Enter in the box did nothing.
+ */
+describe('ox-popup-list with search', () => {
+  const tick = () => new Promise(resolve => setTimeout(resolve, 10))
+
+  async function opened() {
+    const list = await fixture<OxPopupList>(html`<ox-popup-list with-search>
+      <div option value="a">Alpha</div>
+      <div option value="m1">MES one</div>
+      <div option value="m2">MES two</div>
+    </ox-popup-list>`)
+    list.open({ left: 0, top: 0 })
+    await list.updateComplete
+    await tick()
+    return list
+  }
+
+  const type = async (list: OxPopupList, text: string) => {
+    list.searchInput.value = text
+    list.searchInput.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }))
+    await list.updateComplete
+  }
+
+  const enter = (list: OxPopupList, init: KeyboardEventInit = {}) =>
+    list.searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true, ...init }))
+
+  it('opens with the focus in the search box', async () => {
+    const list = await opened()
+    /* Compared as a boolean: a failed chai match on an element hangs the runner. */
+    expect(list.shadowRoot!.activeElement === list.searchInput).to.equal(true)
+  })
+
+  it('picks the first match on Enter in the search box', async () => {
+    const list = await opened()
+    await type(list, 'mes')
+    let picked: unknown
+    list.addEventListener('select', (e: Event) => (picked = (e as CustomEvent).detail))
+    enter(list)
+    await tick()
+    expect(picked).to.equal('m1')
+  })
+
+  it('leaves Enter alone while a word is being composed', async () => {
+    const list = await opened()
+    await type(list, 'mes')
+    let picked = false
+    list.addEventListener('select', () => (picked = true))
+    enter(list, { isComposing: true })
+    await tick()
+    expect(picked).to.equal(false)
+  })
+
+  it('clears the last search when it opens again', async () => {
+    const list = await opened()
+    await type(list, 'mes')
+    list.close()
+    list.open({ left: 0, top: 0 })
+    await list.updateComplete
+    await tick()
+    expect(list.searchInput.value).to.equal('')
+    expect(list.querySelectorAll('[option]:not([hidden])').length).to.equal(3)
+  })
+})

package/test/ox-popup-placement.test.ts

@@ -0,0 +1,81 @@
+import { expect } from '@open-wc/testing'
+import { html, render } from 'lit'
+
+import '../src/ox-popup-list.js'
+import type { OxPopupList } from '../src/ox-popup-list.js'
+
+/*
+ * A list taller than the room below its select was moved up over the select itself (2026-10-25). In a grid cell the
+ * second press of a double-click then landed on an option and picked it. A popup stays off the line it opens from: it
+ * shrinks to the room below, or opens above when there is more room there.
+ */
+describe('ox-popup placement', () => {
+  const frame = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+  let list: OxPopupList
+
+  async function open(count: number, place: { top: number; anchorTop?: number }) {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    render(
+      html`<ox-popup-list with-search>
+        ${Array.from({ length: count }, (_, i) => html`<div option value=${i}>Option ${i}</div>`)}
+      </ox-popup-list>`,
+      host
+    )
+    list = host.querySelector('ox-popup-list') as OxPopupList
+    document.body.appendChild(list)
+    host.remove()
+    await list.updateComplete
+    list.open({ left: 20, ...place })
+    await list.updateComplete
+    await frame()
+    return list.getBoundingClientRect()
+  }
+
+  afterEach(() => {
+    list?.close()
+    list?.remove()
+  })
+
+  it('a long list under a select with more room below shrinks to that room and keeps its search box', async () => {
+    const anchorTop = Math.round(window.innerHeight / 3)
+    const box = await open(200, { anchorTop, top: anchorTop + 30 })
+    expect(box.top).to.be.at.least(anchorTop + 30 - 0.5)
+    expect(box.bottom).to.be.at.most(window.innerHeight + 0.5)
+    const search = list.shadowRoot!.querySelector('[search]')!.getBoundingClientRect()
+    expect(search.top).to.be.at.least(anchorTop + 30 - 0.5)
+    const last = list.querySelector('[option]:last-of-type')!
+    expect(last.getBoundingClientRect().bottom > box.bottom).to.equal(true)
+  })
+
+  it('a long list under a select near the bottom opens above the select', async () => {
+    const anchorTop = window.innerHeight - 60
+    const box = await open(200, { anchorTop, top: anchorTop + 30 })
+    expect(box.bottom).to.be.at.most(anchorTop + 0.5)
+    expect(box.top).to.be.at.least(-0.5)
+  })
+
+  it('a short list that fits stays where it was asked to open', async () => {
+    const box = await open(3, { anchorTop: 40, top: 70 })
+    expect(box.top).to.be.closeTo(70, 0.5)
+  })
+
+  it('a menu at a point near the bottom opens above the point, not over it', async () => {
+    const point = window.innerHeight - 20
+    const box = await open(30, { top: point })
+    expect(box.bottom).to.be.at.most(point + 0.5)
+  })
+
+  it('opened again elsewhere, it does not keep the last place or the last cut', async () => {
+    const anchorTop = Math.round(window.innerHeight / 2)
+    await open(200, { anchorTop, top: anchorTop + 30 })
+    list.close()
+    list.open({ left: 20, anchorTop: 40, top: 70 })
+    await list.updateComplete
+    await frame()
+    const box = list.getBoundingClientRect()
+    expect(box.top).to.be.closeTo(70, 0.5)
+    /* The room below now, less the margin - not the shorter cut of the last opening. */
+    expect(box.bottom).to.be.closeTo(window.innerHeight - 10, 0.5)
+  })
+})