feat(maskedInput): eagerly append separators

Co-authored-by: Joschka de Cuveland <joschka.decuveland@digitalservice.bund.de>
Co-authored-by: Pram Gurusinga <pratama.gurusinga@digitalservice.bund.de>
Co-authored-by: Rafael Falk <rafael.falk@digitalservice.bund.de>
Co-authored-by: Sanny Nguyen Hung <sanny.nguyen@digitalservice.bund.de>

app/components/inputs/DateInput.tsx

@@ -8,6 +8,7 @@ const DateInput = (props: InputProps) => {
       type="number"
       placeholder="TT.MM.JJJJ"
       width="10"
+      eager={"append"}
       {...props}
     />
   );

app/components/inputs/MaskedInput.tsx

@@ -3,6 +3,7 @@ import { IMaskMixin } from "react-imask";
 
 type MaskedInputProps = InputProps & {
   readonly mask: string | RegExp;
+  readonly eager?: boolean | ("remove" | "append");
 };
 
 const MaskedStyledInput = IMaskMixin<HTMLInputElement, InputProps>(

app/components/inputs/TimeInput.tsx

@@ -2,7 +2,15 @@ import { type InputProps } from "./Input";
 import MaskedInput from "./MaskedInput";
 
 const TimeInput = (props: InputProps) => {
-  return <MaskedInput mask={"`0`0:`0`0"} type="number" width="10" {...props} />;
+  return (
+    <MaskedInput
+      mask={"`0`0:`0`0"}
+      type="number"
+      width="10"
+      eager={"append"}
+      {...props}
+    />
+  );
 };
 
 export default TimeInput;