fix(TextField): Mobile SafariでTextField type=dateの高さが潰れてしまうのを修正 (#1550)

* Fix TextField type=date crushed height on iOS * Add change log
4-design · Mar 29, 2024 · 5f4b46a · 5f4b46a
1 parent 5b3a8a8
commit 5f4b46a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/proud-bugs-stare.md b/.changeset/proud-bugs-stare.md
@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+fix(TextField): Mobile SafariでTextField type=dateの高さが潰れてしまうのを修正
diff --git a/packages/for-ui/src/textField/TextField.tsx b/packages/for-ui/src/textField/TextField.tsx
@@ -173,7 +173,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                 `bg-shade-white-disabled placeholder:text-shade-light-default text-shade-light-disabled cursor-not-allowed [-webkit-text-fill-color:currentColor_!important]`,
               ),
               input: fsx([
-                `text-r text-shade-dark-default placeholder:text-shade-light-default h-auto grow p-0 font-sans placeholder:opacity-100 focus:shadow-none`,
+                `text-r text-shade-dark-default placeholder:text-shade-light-default h-6 grow p-0 font-sans placeholder:opacity-100 focus:shadow-none [&::-webkit-date-and-time-value]:text-start`,
                 {
                   large: [`px-2`, icon && `pl-1`],
                   medium: [`px-1`, icon && `pl-1`],