fix: iOS focus bug

pixiv · Feb 1, 2024 · 8b57ea2 · 8b57ea2
1 parent 08674e6
commit 8b57ea2
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/packages/react/src/components/TextField/index.tsx b/packages/react/src/components/TextField/index.tsx
@@ -171,6 +171,7 @@ const StyledInputContainer = styled.div<{
   hasPrefix: boolean
   hasSuffix: boolean
 }>`
+  position: relative;
   display: grid;
   grid-template-columns: ${(p) =>
     [p.hasPrefix && 'auto', '1fr', p.hasSuffix && 'auto']
@@ -218,11 +219,14 @@ const SuffixContainer = styled.span`
 const StyledInput = styled.input<{
   invalid: boolean
 }>`
+  position: absolute;
   border: none;
   box-sizing: border-box;
   outline: none;
   font-family: inherit;
 
+  left: 8px;
+
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
   transform: scale(0.875);