fix(dashboard): close the date picker on a click outside it

tests/unit/date-range-picker.test.tsmodified+13-0

Changes to tests/unit/date-range-picker.test.ts

		⋯112 linesShow the 112 lines above this hunk@@ -113,6 +113,19 @@ describe('date range picker: wiring', () => {
113	113	expect(dashboard).not.toContain('type="date"')
114	114	})
115	115
	116	+ test('an open panel is dismissed by a click outside it', () => {
	117	+ // A native <details> has no outside-click close, so the component adds a
	118	+ // transparent full-viewport backdrop behind the panel that closes it.
	119	+ expect(component).toContain('<div class="drp-backdrop" @click="pickClose"')
	120	+ expect(component).toMatch(/function pickClose\(e\) \{[\s\S]*?closest\('details'\)[\s\S]*?removeAttribute\('open'\)/)
	121	+ // It sits below the panel and above the sticky nav so a click on the panel
	122	+ // itself never reaches it, but a click on the page behind does.
	123	+ const backdrop = dashboard.match(/\.drp-backdrop\s*\{[^}]*\}/)?.[0] ?? ''
	124	+ expect(backdrop).toContain('position: fixed')
	125	+ expect(backdrop).toContain('inset: 0')
	126	+ expect(backdrop).toMatch(/z-index:\s*39\b/)
	127	+ })
	128	+
116	129	test('at phone width the panel shows one calendar inside the visible viewport', () => {
117	130	// Anchored on the rule that already switches the menu to phone layout, so the
118	131	// test does not depend on the block's breakpoint value.