@@ -135,6 +135,21 @@ function renderUsageEmptyState(onRefresh: () => void) {
|
135 | 135 | `; |
136 | 136 | } |
137 | 137 | |
| 138 | +function closeDetailsOnOutsideClick(e: Event) { |
| 139 | +const el = e.currentTarget as HTMLDetailsElement; |
| 140 | +if (!el.open) { |
| 141 | +return; |
| 142 | +} |
| 143 | +const onClick = (ev: MouseEvent) => { |
| 144 | +const path = ev.composedPath(); |
| 145 | +if (!path.includes(el)) { |
| 146 | +el.open = false; |
| 147 | +window.removeEventListener("click", onClick, true); |
| 148 | +} |
| 149 | +}; |
| 150 | +window.addEventListener("click", onClick, true); |
| 151 | +} |
| 152 | + |
138 | 153 | export function renderUsage(props: UsageProps) { |
139 | 154 | const { data, filters, display, detail, callbacks } = props; |
140 | 155 | const filterActions = callbacks.filters; |
@@ -368,23 +383,7 @@ export function renderUsage(props: UsageProps) {
|
368 | 383 | options.length > 0 && options.every((value) => selectedSet.has(normalizeQueryText(value))); |
369 | 384 | const selectedCount = selected.length; |
370 | 385 | return html` |
371 | | - <details |
372 | | - class="usage-filter-select" |
373 | | - @toggle=${(e: Event) => { |
374 | | - const el = e.currentTarget as HTMLDetailsElement; |
375 | | - if (!el.open) { |
376 | | - return; |
377 | | - } |
378 | | - const onClick = (ev: MouseEvent) => { |
379 | | - const path = ev.composedPath(); |
380 | | - if (!path.includes(el)) { |
381 | | - el.open = false; |
382 | | - window.removeEventListener("click", onClick, true); |
383 | | - } |
384 | | - }; |
385 | | - window.addEventListener("click", onClick, true); |
386 | | - }} |
387 | | - > |
| 386 | + <details class="usage-filter-select" @toggle=${closeDetailsOnOutsideClick}> |
388 | 387 | <summary> |
389 | 388 | <span>${label}</span> |
390 | 389 | ${selectedCount > 0 |
@@ -517,23 +516,7 @@ export function renderUsage(props: UsageProps) {
|
517 | 516 | > |
518 | 517 | ${display.headerPinned ? t("usage.filters.pinned") : t("usage.filters.pin")} |
519 | 518 | </button> |
520 | | - <details |
521 | | - class="usage-export-menu" |
522 | | - @toggle=${(e: Event) => { |
523 | | - const el = e.currentTarget as HTMLDetailsElement; |
524 | | - if (!el.open) { |
525 | | - return; |
526 | | - } |
527 | | - const onClick = (ev: MouseEvent) => { |
528 | | - const path = ev.composedPath(); |
529 | | - if (!path.includes(el)) { |
530 | | - el.open = false; |
531 | | - window.removeEventListener("click", onClick, true); |
532 | | - } |
533 | | - }; |
534 | | - window.addEventListener("click", onClick, true); |
535 | | - }} |
536 | | - > |
| 519 | + <details class="usage-export-menu" @toggle=${closeDetailsOnOutsideClick}> |
537 | 520 | <summary class="btn btn--sm">${t("usage.export.label")} ▾</summary> |
538 | 521 | <div class="usage-export-popover"> |
539 | 522 | <div class="usage-export-list"> |
|
