Fix: enhance DateInput component layout and improve Year input change…

… handler
WTW-IM · Nov 19, 2024 · ae334df · ae334df
1 parent 91c540d
commit ae334df
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/es-components/src/components/patterns/dateInput/DateInput.tsx b/packages/es-components/src/components/patterns/dateInput/DateInput.tsx
@@ -14,6 +14,7 @@ import { useMonitoringCallback } from '../../../hooks/useMonitoringHooks';
 
 const Wrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
 
   && > * {
     margin-right: 2px;

diff --git a/packages/es-components/src/components/patterns/dateInput/Year.tsx b/packages/es-components/src/components/patterns/dateInput/Year.tsx
@@ -31,12 +31,15 @@ const Year = React.forwardRef<HTMLInputElement, YearProps>(
     const [value, setValue] = useState(date?.getFullYear() || '');
 
     const onYearChange: React.ChangeEventHandler<HTMLInputElement> =
-      useMonitoringCallback((currentOnChange, event) => {
-        let year = event.target.value;
-        year = year.length > 4 ? year.slice(0, 4) : year;
-        setValue(year);
-        currentOnChange?.('year', year);
-      }, onChange);
+      useMonitoringCallback(
+        (currentOnChange, event: React.ChangeEvent<HTMLInputElement>) => {
+          let year = event.target.value;
+          year = year.length > 4 ? year.slice(0, 4) : year;
+          setValue(year);
+          currentOnChange?.('year', year);
+        },
+        onChange
+      );
 
     const onYearKeyDown: React.KeyboardEventHandler<HTMLInputElement> =
       useMonitoringCallback((currentOnKeyDown, ev) => {