diff --git a/src/OtpInput/OtpInput.styles.ts b/src/OtpInput/OtpInput.styles.ts index 9e723fa..5e6362c 100644 --- a/src/OtpInput/OtpInput.styles.ts +++ b/src/OtpInput/OtpInput.styles.ts @@ -19,7 +19,6 @@ export const styles = StyleSheet.create({ fontSize: 28, }, hiddenInput: { - ...StyleSheet.absoluteFillObject, ...Platform.select({ ios: { opacity: 0.02, diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx index f1efc5d..a3ae690 100644 --- a/src/OtpInput/OtpInput.tsx +++ b/src/OtpInput/OtpInput.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { forwardRef, useImperativeHandle } from "react"; -import { Platform, Pressable, Text, TextInput, View } from "react-native"; +import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native"; import { styles } from "./OtpInput.styles"; import { OtpInputProps, OtpInputRef } from "./OtpInput.types"; import { VerticalStick } from "./VerticalStick"; @@ -124,7 +124,7 @@ export const OtpInput = forwardRef((props, ref) => { onBlur={handleBlur} caretHidden={Platform.OS === "ios"} {...textInputProps} - style={[styles.hiddenInput, textInputProps?.style]} + style={[StyleSheet.absoluteFill, styles.hiddenInput, textInputProps?.style]} /> ); diff --git a/src/OtpInput/__tests__/OtpInput.test.tsx b/src/OtpInput/__tests__/OtpInput.test.tsx index fdfe1da..dbd2244 100644 --- a/src/OtpInput/__tests__/OtpInput.test.tsx +++ b/src/OtpInput/__tests__/OtpInput.test.tsx @@ -73,6 +73,20 @@ describe("OtpInput", () => { expect(input.props.autoFocus).toBe(false); }); + test("should keep hidden input absolutely positioned to avoid affecting OTP cell spacing", () => { + renderOtpInput(); + + const input = screen.getByTestId("otp-input-hidden"); + + expect(input).toHaveStyle({ + position: "absolute", + top: 0, + right: 0, + bottom: 0, + left: 0, + }); + }); + test("should not focus if disabled is true", () => { renderOtpInput({ disabled: true, diff --git a/src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap b/src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap index ffe54ed..34d44bb 100644 --- a/src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap +++ b/src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap @@ -399,13 +399,15 @@ exports[`OtpInput UI should render correctly 1`] = ` [ { "bottom": 0, - "color": "transparent", "left": 0, - "opacity": 0.02, "position": "absolute", "right": 0, "top": 0, }, + { + "color": "transparent", + "opacity": 0.02, + }, undefined, ] }