Remove visible caret - iOS always visible

[codercodingthecode]

Update Styling Properties in OTPInput Component to Remove Caret. Partially resolve https://github.com/guilhermerodz/input-otp/issues/32 UI Issue

Update:

• This pull request introduces updates to the styling properties of the OTPInput component within the input.tsx file.
• The changes aim to enhance the component's visual appearance and consistency with the overall design system to reduce internal styling.
• The changes prevent the caret from displaying on the screen when all the inputs are filled in on iOS.
• Users are not forced to auto-submit or blur when all characters/digits are filled in.

Changes:

• Removed the font-family: 'monospace' property.
• Added box-sizing: 'border-box' property.

Rationale: The removal of the monospace font family from the OTPInput component is motivated by a desire to maintain visual consistency throughout the application. As most components utilize the default system font, aligning the OTPInput component with this standard enhances the cohesive appearance of the interface and reduces the internal styling of the components.

Before

After

The introduction of the box-sizing: 'border-box' property addresses layout challenges encountered with the component's sizing. By including padding and borders in the component's dimensions, we can avoid unexpected layout shifts and provide a more stable and predictable interface for users.

Before

After

Result

Impact:

• These changes are expected to improve the visual consistency of the OTPInput component and preventing the caret from displaying.
  • No major impacts on functionality or existing layouts are anticipated, as the adjustments are primarily aesthetic and pertain to internal component spacing.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rodz-input-otp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 13, 2024 8:38am

[guilhermerodz]

hi @codercodingthecode thank you for tackling this issue!

however, this issue is bigger than what we all initially thought...

if the visible caret isn't visible, then it negatively impacts the position where the iOS' long-press context menu will pop. that's why I had to leave a single pixel width caret for iOS, so that it at leasts know where to show.

https://github.com/guilhermerodz/input-otp/assets/10366880/251e886b-3cfe-422e-ba82-1e744355dd30

regarding the monospace font choice:

• enforcing monospace font hasn't been an issue as it really doesn't affect anything in appearance when JS is enabled on the page. haven't had any reports about the monospace choice yet.
• enforcing monospace helps with consistent spacing per-character, as input-otp implementation is currently "hacky" and needs some predictability/tests.

[ssijak]

@guilhermerodz Is there any way to fix caret showing up on iOS then?

[ssijak]

can we set opacity to 0.01 to remove the caret

[guilhermerodz]

can we set opacity to 0.01 to remove the caret

that would be so cool! however, iOS does not play well when selecting invisible text 😢

iirc, the dropdown menu does not even show up

[guilhermerodz]

Closing this as it's no longer active. Thanks for helping me out with this!