From b4035189866b84e5869b5352f9fd3c7fab3ca4c2 Mon Sep 17 00:00:00 2001
From: Laura Neto <12862535+lauraneto@users.noreply.github.com>
Date: Fri, 30 May 2025 12:44:52 +0200
Subject: [PATCH] Use the proper `umb-input-date` events in the log viewer date
 range element (#19451)

Fixes #19382 by using proper umb-input-date events

The log viewer date range input was changed from using `input` to `umb-input-date`, but the event handlers weren't updated accordingly.
---
 .../log-viewer-date-range-selector.element.ts | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts
index 54bc10cf90..5333f3a7c1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts
@@ -1,9 +1,10 @@
 import type { LogViewerDateRange, UmbLogViewerWorkspaceContext } from '../workspace/logviewer-workspace.context.js';
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../workspace/logviewer-workspace.context-token.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property, queryAll, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { query as getQuery, path, toQueryString } from '@umbraco-cms/backoffice/router';
+import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-log-viewer-date-range-selector')
 export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
@@ -13,9 +14,6 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 	@state()
 	private _endDate = '';
 
-	@queryAll('input')
-	private _inputs!: NodeListOf<HTMLInputElement>;
-
 	@property({ type: Boolean, reflect: true })
 	horizontal = false;
 
@@ -23,16 +21,11 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 
 	constructor() {
 		super();
-		this.addEventListener('input', this.#setDates);
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
 			this.#logViewerContext = instance;
 			this.#observeStuff();
 		});
 	}
-	override disconnectedCallback(): void {
-		super.disconnectedCallback();
-		this.removeEventListener('input', this.#setDates);
-	}
 
 	#observeStuff() {
 		if (!this.#logViewerContext) return;
@@ -46,14 +39,17 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 		);
 	}
 
-	#setDates() {
-		this._inputs.forEach((input) => {
-			if (input.id === 'start-date') {
-				this._startDate = input.value;
-			} else if (input.id === 'end-date') {
-				this._endDate = input.value;
-			}
-		});
+	#setStartDate(e: UUIInputEvent) {
+		this._startDate = e.target.value as string;
+		this.#updateFiltered();
+	}
+
+	#setEndDate(e: UUIInputEvent) {
+		this._endDate = e.target.value as string;
+		this.#updateFiltered();
+	}
+
+	#updateFiltered() {
 		this.#logViewerContext?.setDateRange({ startDate: this._startDate, endDate: this._endDate });
 
 		const query = getQuery();
@@ -71,9 +67,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 			<div class="input-container">
 				<uui-label for="start-date">From:</uui-label>
 				<umb-input-date
-					@click=${(e: Event) => {
-						(e.target as HTMLInputElement).showPicker();
-					}}
+					@change=${this.#setStartDate}
 					id="start-date"
 					type="date"
 					label="From"
@@ -83,9 +77,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 			<div class="input-container">
 				<uui-label for="end-date">To: </uui-label>
 				<umb-input-date
-					@click=${(e: Event) => {
-						(e.target as HTMLInputElement).showPicker();
-					}}
+					@change=${this.#setEndDate}
 					id="end-date"
 					type="date"
 					label="To"