Fix DateField and DateRangeField width multiple (#1432)

voyagegroup · Sep 25, 2023 · 04af46d · 04af46d
1 parent 73d1cfc
commit 04af46d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/healthy-queens-tap.md b/.changeset/healthy-queens-tap.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+fix width multiple
diff --git a/src/components/DateField/DateField/DateField.tsx b/src/components/DateField/DateField/DateField.tsx
@@ -43,7 +43,7 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
     propRef,
   ) {
     const theme = useTheme();
-    const width = useMemo(() => `${getInputWidth(format) * 10}px`, [format]);
+    const width = useMemo(() => `${getInputWidth(format) * 9}px`, [format]);
     const { ref: inputRef, ...props } = useDateField({ format, ...rest });
     const ref = useMergeRefs<HTMLInputElement>(propRef, inputRef);
 

diff --git a/src/components/DateField/DateRangeField/DateRangeField.tsx b/src/components/DateField/DateRangeField/DateRangeField.tsx
@@ -53,7 +53,7 @@ const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(
     propRef,
   ) {
     const theme = useTheme();
-    const width = useMemo(() => `${getInputWidth(format) * 10}px`, [format]);
+    const width = useMemo(() => `${getInputWidth(format) * 9}px`, [format]);
 
     const handleChange = (t: ClickStateType) => (date: Dayjs) => {
       const { startDate, endDate } = rest.date;