From 57c24235e0ec92f1f33cafc6c110ccc48c1350d1 Mon Sep 17 00:00:00 2001
From: chris <christoph.hohnerlein@digitalservice.bund.de>
Date: Mon, 22 Jan 2024 11:53:28 +0100
Subject: [PATCH] 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   |  1 +
 app/components/inputs/MaskedInput.tsx |  1 +
 app/components/inputs/TimeInput.tsx   | 10 +++++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/inputs/DateInput.tsx b/app/components/inputs/DateInput.tsx
index 017862507..74be58739 100644
--- a/app/components/inputs/DateInput.tsx
+++ b/app/components/inputs/DateInput.tsx
@@ -8,6 +8,7 @@ const DateInput = (props: InputProps) => {
       type="number"
       placeholder="TT.MM.JJJJ"
       width="10"
+      eager={"append"}
       {...props}
     />
   );
diff --git a/app/components/inputs/MaskedInput.tsx b/app/components/inputs/MaskedInput.tsx
index b3a3958c2..c81c88960 100644
--- a/app/components/inputs/MaskedInput.tsx
+++ b/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>(
diff --git a/app/components/inputs/TimeInput.tsx b/app/components/inputs/TimeInput.tsx
index fc79ae78f..7f2d36043 100644
--- a/app/components/inputs/TimeInput.tsx
+++ b/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;