From 664d68e541e633e8b4f553f60ae6366e5840a682 Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Wed, 5 Feb 2025 14:26:06 +0000
Subject: [PATCH] Decimal `umb-property-editor-ui-number` fixes (#18233)

* Numeric: renamed `#parseInt` function to `#parseNumber`

* Numeric: Changed to use `@change` event

* Number input: `max="Infinity"` was invalid markup

We don't need to always set the `min` and `max` attributes.
Leave the browser to do its thing.

* Decimal: adds input `step` config
---
 .../number/Umbraco.Decimal.ts                 | 12 +++++------
 .../number/Umbraco.Integer.ts                 |  1 +
 .../property-editor-ui-number.element.ts      | 20 ++++++++++---------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts
index c99e98baec..81a1266951 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts
@@ -12,24 +12,24 @@ export const manifests: Array<UmbExtensionManifest> = [
 						label: 'Minimum',
 						description: 'Enter the minimum amount of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+						config: [{ alias: 'step', value: '0.001' }],
 					},
 					{
 						alias: 'max',
 						label: 'Maximum',
 						description: 'Enter the maximum amount of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+						config: [
+							{ alias: 'placeholder', value: '∞' },
+							{ alias: 'step', value: '0.001' },
+						],
 					},
 					{
 						alias: 'step',
 						label: 'Step size',
 						description: 'Enter the intervals amount between each step of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
-						config: [
-							{
-								alias: 'step',
-								value: '0.01',
-							},
-						],
+						config: [{ alias: 'step', value: '0.001' }],
 					},
 				],
 			},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts
index 97ea39ee2a..d5038b8af3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts
@@ -18,6 +18,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 						label: 'Maximum',
 						description: 'Enter the maximum amount of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+						config: [{ alias: 'placeholder', value: '∞' }],
 					},
 					{
 						alias: 'step',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
index 23663cb0fd..b423c6c6c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
@@ -39,9 +39,9 @@ export class UmbPropertyEditorUINumberElement
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
-		this._min = this.#parseInt(config.getValueByAlias('min')) || 0;
-		this._max = this.#parseInt(config.getValueByAlias('max')) || Infinity;
-		this._step = this.#parseInt(config.getValueByAlias('step'));
+		this._min = this.#parseNumber(config.getValueByAlias('min'));
+		this._max = this.#parseNumber(config.getValueByAlias('max'));
+		this._step = this.#parseNumber(config.getValueByAlias('step'));
 		this._placeholder = config.getValueByAlias('placeholder');
 	}
 
@@ -80,13 +80,15 @@ export class UmbPropertyEditorUINumberElement
 		}
 	}
 
-	#parseInt(input: unknown): number | undefined {
+	#parseNumber(input: unknown): number | undefined {
 		const num = Number(input);
-		return Number.isNaN(num) ? undefined : num;
+		return Number.isFinite(num) ? num : undefined;
 	}
 
-	#onInput(e: InputEvent & { target: HTMLInputElement }) {
-		this.value = this.#parseInt(e.target.value);
+	#onChange(event: InputEvent & { target: HTMLInputElement }) {
+		const newValue = event.target.value === '' ? undefined : this.#parseNumber(event.target.value);
+		if (newValue === this.value) return;
+		this.value = newValue;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -99,8 +101,8 @@ export class UmbPropertyEditorUINumberElement
 				max=${ifDefined(this._max)}
 				step=${ifDefined(this._step)}
 				placeholder=${ifDefined(this._placeholder)}
-				value=${this.value?.toString() ?? (this._placeholder ? '' : '0')}
-				@input=${this.#onInput}
+				value=${this.value?.toString() ?? ''}
+				@change=${this.#onChange}
 				?readonly=${this.readonly}>
 			</uui-input>
 		`;