raster_layer_editor: Fix several issues with the min and max input fields on RasterLayerEditor.

The first issue was sometimes keyboard events would propagate up to the document and it could trigger keyboard shortcuts in Jupyter Lab.

The second issue was min and max values being set to NaN when changing the inputs via the keyboard.

Author: naschmitz

js/raster_layer_editor.ts

@@ -78,6 +78,9 @@ export class RasterLayerEditor extends LitElement {
     @query("legend-customization") legendCustomization?: LegendCustomization;
     @queryAll("#band-selection select") bandSelects!: NodeListOf<HTMLInputElement>;
 
+    @query("#min") private minInput!: HTMLInputElement;
+    @query("#max") private maxInput!: HTMLInputElement;
+
     override connectedCallback() {
         super.connectedCallback();
         this.colorModel =
@@ -141,6 +144,7 @@ export class RasterLayerEditor extends LitElement {
                         id="min"
                         name="min"
                         .value="${this.minValue ?? "Loading..."}"
+                        @keydown="${this.onInputKeyDown}"
                         @change="${this.onMinTextChanged}"
                         ?disabled="${this.minAndMaxValuesLocked}"
                     />
@@ -151,6 +155,7 @@ export class RasterLayerEditor extends LitElement {
                         id="max"
                         name="max"
                         .value="${this.maxValue ?? "Loading..."}"
+                        @keydown="${this.onInputKeyDown}"
                         @change="${this.onMaxTextChanged}"
                         ?disabled="${this.minAndMaxValuesLocked}"
                     />
@@ -296,12 +301,16 @@ export class RasterLayerEditor extends LitElement {
         this.gamma = (event.target as HTMLInputElement).valueAsNumber;
     }
 
-    private onMinTextChanged(event: Event): void {
-        this.minValue = (event.target as HTMLInputElement).valueAsNumber;
+    private onInputKeyDown(event: KeyboardEvent): void {
+        event.stopPropagation();  // Prevent the event from bubbling up to the document.
+    }
+
+    private onMinTextChanged(_event: Event): void {
+        this.minValue = +this.minInput.value;  // Convert input string to number.
     }
 
-    private onMaxTextChanged(event: Event): void {
-        this.maxValue = (event.target as HTMLInputElement).valueAsNumber;
+    private onMaxTextChanged(_event: Event): void {
+        this.maxValue = +this.maxInput.value;  // Convert input string to number.
     }
 
     private calculateBandStats(): void {