also looking at this
fix(dashboard): close the date picker on a click outside it
#56
3 files
+25
-0
| @@ -181,6 +181,16 @@ function pickLeftMonth(e) { pickSetYm(pickYearOf(calYm()), Number(e.target.value | ||
| 181 | 181 | function pickLeftYear(e) { pickSetYm(Number(e.target.value), pickMonthIdx(calYm()), false) } |
| 182 | 182 | function pickRightMonth(e) { pickSetYm(pickYearOf(pickRightYm()), Number(e.target.value), true) } |
| 183 | 183 | function pickRightYear(e) { pickSetYm(Number(e.target.value), pickMonthIdx(pickRightYm()), true) } |
| 184 | // A native <details> only closes from its own summary, so an open panel would | |
| 185 | // otherwise sit there after the pointer moves on. The transparent .drp-backdrop | |
| 186 | // below covers the rest of the page while the panel is open; a click on it lands | |
| 187 | // here and closes the panel, the same way clicking away from a menu should. | |
| 188 | function pickClose(e) { | |
| 189 | const d = e.currentTarget.closest('details') | |
| 190 | if (d) d.removeAttribute('open') | |
| 191 | selStart.set('') | |
| 192 | selHover.set('') | |
| 193 | } | |
| 184 | 194 | function pickEscape(e) { |
| 185 | 195 | if (e.key !== 'Escape') return |
| 186 | 196 | selStart.set('') |
| @@ -194,6 +204,7 @@ function pickEscape(e) { | ||
| 194 | 204 | <i class="i-hugeicons-calendar-03" aria-hidden="true"></i> |
| 195 | 205 | <span>{{ summary }}</span> |
| 196 | 206 | </summary> |
| 207 | <div class="drp-backdrop" @click="pickClose" aria-hidden="true"></div> | |
| 197 | 208 | <div class="date-popover drp" role="dialog" aria-label="Reporting period"> |
| 198 | 209 | <div class="drp-presets" role="list"> |
| 199 | 210 | <button type="button" role="listitem" :class="pickPresetClass('today')" @click="pickApply('today')">Today</button> |