DbInput value is not reactive and does not behave like a regular input

[nsorinandrena]

Hello,

I am working on an input element based on DbInput (in react). Here is a simplified version:

import {ChangeEvent, useEffect, useRef, } from "react";

import "@db-ui/core/dist/css/01-elements/input/input.css";
import {DbInput} from "@db-ui/react-elements";

interface CustomInputProps {
    label: string;
    onChange: (value: string) => void;
    value: string;
    name: string;
}

const CustomInput: React.FC<CustomInputProps> = ({label, name, onChange, value}) => {
    
    function cleanInput(inputValue: string) {
        // Here the user input is cleaned, for instance by removing invalid characters
        return doSomething(inputValue);;
    }

    function handleChange(event: ChangeEvent<HTMLDbInputElement>) {
        if (event.target.value !== undefined) {
                onChange(cleanInput(event.target.value))
        }
    }

    return (<DbInput type="text" label={label} name={name} value={value} onInput={handleChange} />)
}

export default CustomInput;

In this example, when a user enters something, their input is cleaned, then sent to the parent, which updates the value prop.

If I replace the DbInput with a standard HTML input Element, this works as intended. Only the cleaned input content appears in the input field. For the user, it looks like their invalid input was ignored.

However, with DbInput, the visible value is never updated from the value Prop, which effectively ignores the "clean" step and displays everything the user inputs, including invalid characters. This does not work with a local state either - DbInput seems to only read the value once, then ignore subsequent updates.

My understanding is that DbInput should behave like a regular Input. If so, this is definitely a bug. Could you please take a look?

Best regards
Nicolas