@db-ux/react-core-components 4.5.4-postcss-a42fe67 → 4.5.4-postcss2-6de35db

package/dist/components/input/input.js

@@ -125,9 +125,7 @@ function DBInputFn(props, component) {
         }
     }, [_id]);
     useEffect(() => {
-        if (props.value !== undefined) {
-            set_value(props.value);
-        }
+        set_value(props.value);
     }, [props.value]);
     useEffect(() => {
         // If angular uses ngModel value and _value are null

package/dist/components/textarea/textarea.js

@@ -112,9 +112,7 @@ function DBTextareaFn(props, component) {
         }
     }, [_id]);
     useEffect(() => {
-        if (props.value !== undefined) {
-            set_value(props.value);
-        }
+        set_value(props.value);
     }, [props.value]);
     useEffect(() => {
         // If angular uses ngModel value and _value are null

package/dist/utils/form-components.d.ts

@@ -1,4 +1,4 @@
-export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string) => void;
+export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string, lastValue?: any) => void;
 export declare const handleFrameworkEventVue: (emit: (event: string, ...args: any[]) => void, event: any, modelValue?: string) => void;
 export declare const addResetEventListener: (element: any, resetFunction: (event: Event) => void, signal: AbortSignal) => void;
 export declare const addCheckedResetEventListener: (element: any, props: {

package/dist/utils/form-components.js

@@ -1,8 +1,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { delay } from './index';
-export const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
-    component.propagateChange(event.target[modelValue]);
-    component.writeValue(event.target[modelValue]);
+const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
+export const handleFrameworkEventAngular = (component, event, modelValue = 'value', lastValue) => {
+    var _a;
+    const value = event.target[modelValue];
+    const type = (_a = event.target) === null || _a === void 0 ? void 0 : _a.type;
+    if (!value && value !== '' && ['date', 'time', 'week', 'month', 'datetime-local'].includes(type)) {
+        // If value is empty and type date we skip `writingValue` function
+        return;
+    }
+    if (type === 'number') {
+        if (event.type === 'input') {
+            if (specialNumberCharacters.includes(event.data) || specialNumberCharacters.some(specialCharacter => lastValue === null || lastValue === void 0 ? void 0 : lastValue.toString().includes(specialCharacter)) && event.inputType === 'deleteContentBackward') {
+                // Skip `writingValue` function if number type and input event
+                // and `.` or `,` or 'e', 'E', '+', '-' was typed
+                // or content was deleted but last number had a `.`
+                return;
+            }
+        }
+        else if (event.type === 'change') {
+            // Skip `writingValue` function if number type and change event
+            return;
+        }
+    }
+    component.propagateChange(value);
+    component.writeValue(value);
 };
 export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
     // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"

package/dist/utils/form-components.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/form-components.spec.js

@@ -0,0 +1,167 @@
+import { describe, expect, it, vi } from 'vitest';
+import { handleFrameworkEventAngular, handleFrameworkEventVue } from './form-components';
+const createNumberEvent = (value, badInput, inputType) => ({
+    inputType,
+    target: {
+        type: 'number',
+        value,
+        validity: {
+            badInput
+        }
+    }
+});
+const createTextEvent = (value) => ({
+    target: {
+        type: 'text',
+        value,
+        validity: {
+            badInput: false
+        }
+    }
+});
+describe('handleFrameworkEventAngular', () => {
+    it('calls propagateChange and writeValue for valid number value', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = createNumberEvent('1.5', false);
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).toHaveBeenCalledWith('1.5');
+        expect(component.writeValue).toHaveBeenCalledWith('1.5');
+    });
+    it('skips propagateChange and writeValue when "." is typed (intermediate state)', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: '.',
+            inputType: 'insertText',
+            target: {
+                type: 'number',
+                value: '1.'
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('skips propagateChange and writeValue when "," is typed (intermediate state)', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: ',',
+            inputType: 'insertText',
+            target: {
+                type: 'number',
+                value: ''
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it.each(['e', 'E', '+', '-'])('skips propagateChange and writeValue when "%s" is typed (intermediate state)', char => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: char,
+            inputType: 'insertText',
+            target: {
+                type: 'number',
+                value: ''
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('skips propagateChange and writeValue when deleting content and lastValue has decimal', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'input',
+            data: null,
+            inputType: 'deleteContentBackward',
+            target: {
+                type: 'number',
+                value: ''
+            }
+        };
+        handleFrameworkEventAngular(component, event, 'value', '1.5');
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('calls propagateChange and writeValue when number input is cleared via backspace (no decimal in lastValue)', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = createNumberEvent('', false, 'deleteContentBackward');
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).toHaveBeenCalledWith('');
+        expect(component.writeValue).toHaveBeenCalledWith('');
+    });
+    it('skips propagateChange and writeValue for number change events', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = {
+            type: 'change',
+            target: {
+                type: 'number',
+                value: '5'
+            }
+        };
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).not.toHaveBeenCalled();
+        expect(component.writeValue).not.toHaveBeenCalled();
+    });
+    it('calls propagateChange and writeValue for text input type', () => {
+        const component = {
+            propagateChange: vi.fn(),
+            writeValue: vi.fn()
+        };
+        const event = createTextEvent('hello');
+        handleFrameworkEventAngular(component, event);
+        expect(component.propagateChange).toHaveBeenCalledWith('hello');
+        expect(component.writeValue).toHaveBeenCalledWith('hello');
+    });
+});
+describe('handleFrameworkEventVue', () => {
+    it('emits update:value for valid number value', () => {
+        const emit = vi.fn();
+        const event = createNumberEvent('1.5', false);
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', '1.5');
+    });
+    it('emits update:value with empty string when number input has badInput (intermediate state like "1.")', () => {
+        const emit = vi.fn();
+        const event = createNumberEvent('', true);
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', '');
+    });
+    it('emits update:value when number input is cleared (empty, no badInput)', () => {
+        const emit = vi.fn();
+        const event = createNumberEvent('', false);
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', '');
+    });
+    it('emits update:value for text input type', () => {
+        const emit = vi.fn();
+        const event = createTextEvent('hello');
+        handleFrameworkEventVue(emit, event);
+        expect(emit).toHaveBeenCalledWith('update:value', 'hello');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.5.4-postcss-a42fe67",
+  "version": "4.5.4-postcss2-6de35db",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.58.2",
+    "@playwright/experimental-ct-react": "1.59.1",
     "@types/react": "19.2.14",
     "react": "19.2.4",
     "react-dom": "19.2.4"
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.5.4-postcss-a42fe67",
-    "@db-ux/core-foundations": "4.5.4-postcss-a42fe67"
+    "@db-ux/core-components": "4.5.4-postcss2-6de35db",
+    "@db-ux/core-foundations": "4.5.4-postcss2-6de35db"
   }
 }