fix: The inputNumber should be reset correctly when its initial value is null (#377)

Author: baiwusanyu-c

components/Form/__test__/fixture/inputNumberReset.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { KForm, KFormItem } from '@ikun-ui/form';
+	import { KInputNumber } from '@ikun-ui/input-number';
+	const initValue = {
+		KInputNumber: null
+	};
+	let KFormInst: KForm | undefined = undefined;
+	const handleReset = () => {
+		KFormInst && KFormInst.resetForm();
+	};
+
+	const rules = {
+		KInputNumber: [
+			{ required: true, msg: 'KInputNumber required' },
+			{ min: 3, max: 5, msg: 'KInputNumber 3 ~5' }
+		]
+	};
+</script>
+
+<KForm {initValue} {rules} bind:this={KFormInst}>
+	<KFormItem field="KInputNumber" label="KInputNumber">
+		<KInputNumber placeholder="KInputNumber" />
+	</KFormItem>
+</KForm>
+<button id="reset" on:click={handleReset}>reset</button>

components/Form/__test__/form.spec.ts

@@ -20,6 +20,7 @@ import KFormItemLabelSlot from './fixture/labelSlot.svelte';
 import KFormValidateEvent from './fixture/validateEvent.svelte';
 import KFormValidateEventSefField from './fixture/validateEventSefField.svelte';
 import KFormValidateEventValidateField from './fixture/validateEventvalidateField.svelte';
+import KFormReset from './fixture/inputNumberReset.svelte';
 import { tick } from 'svelte';
 import { fireEvent, screen, render, waitFor } from '@testing-library/svelte';
 import { getValueByPath, parsePath, setValueByPath } from '../src/helpers/fields';
@@ -982,8 +983,6 @@ describe('Test: KForm', () => {
 		});
 		expect(instance).toBeTruthy();
 		await tick();
-		expect(instance).toBeTruthy();
-		await tick();
 		expect(host.innerHTML.includes('Error-Slot')).not.toBeTruthy();
 
 		const btn = host.querySelector('#validate');
@@ -993,6 +992,29 @@ describe('Test: KForm', () => {
 		expect(host.innerHTML.includes('Error-Slot')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
+
+	test('The inputNumber component should be reset correctly when its initial value is null', async () => {
+		// @ts-ignore
+		const instance = new KFormReset({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		const input = host.querySelector('.k-input--inner');
+		expect(input.value).toBe('');
+
+		const upElm = host.querySelector('.k-input-number--up');
+		upElm?.click();
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		expect(input.value).toBe('1');
+
+		const btn = host.querySelector('#reset');
+		btn?.click();
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		expect(input.value).toBe('');
+	});
 });
 
 describe('Test: KForm helper fields', () => {

components/InputNumber/src/index.svelte

@@ -48,6 +48,8 @@
 	 * @internal
 	 */
 	export let center: KInputNumberProps['center'] = false;
+	let resolveValue: Decimal | null = value ? new Deci(value) : null;
+	let inputRef: null | HTMLInputElement | HTMLTextAreaElement = null;
 	/*********************** KForm logic start ************************/
 	let disabledFrom = false;
 	$: disabledInner = disabledFrom || disabled;
@@ -62,10 +64,11 @@
 	// on the form value in the KFormItem context
 	function formUpdateField(init = false) {
 		field = formContext.split('&').pop();
-		value = formInstance.getValueByPath(
+		resolveValue = value = formInstance.getValueByPath(
 			field,
 			init ? formInstance.__default_value : formInstance.__value
 		);
+		setValueToInput(normalizeVarStrEmpty(`${toPrecision(resolveValue)}`));
 	}
 	function formPropsChangeCb(props: Record<any, any>) {
 		disabledFrom = props.disabled;
@@ -95,7 +98,6 @@
 	/*********************** KForm logic end ************************/
 
 	const dispatch = createEventDispatcher();
-	let resolveValue: Decimal | null = value ? new Deci(value) : null;
 	$: {
 		if (!isInput) {
 			resolveValue = fixStepStrictlyVal(value);
@@ -203,7 +205,6 @@
 		}
 	};
 
-	let inputRef: null | HTMLInputElement | HTMLTextAreaElement = null;
 	const handlePrependClick = () => {
 		if (disabledInner) return;
 		inputRef && dispatch('triggerPrepend', new Deci(inputRef.value).toNumber());
@@ -248,14 +249,14 @@
 		return value;
 	};
 
-	$: toPrecision = (value: Decimal | null) => {
+	function toPrecision(value: Decimal | null) {
 		if (value && precision) {
 			return value.toFixed(precision);
 		}
 
 		if (value && !precision) return value.toString();
 		return null;
-	};
+	}
 
 	// class names
 	const prefixCls = getPrefixCls('input');