Closed codercodingthecode closed 1 month ago
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 |
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:
@guilhermerodz Is there any way to fix caret showing up on iOS then?
can we set opacity to 0.01 to remove the caret
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
Closing this as it's no longer active. Thanks for helping me out with this!
Update Styling Properties in OTPInput Component to Remove Caret. Partially resolve https://github.com/guilhermerodz/input-otp/issues/32 UI Issue
Update:
Changes:
font-family: 'monospace'
property.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: