search

guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.52k stars 53 forks source link

Issue with Input Element Width Expansion on Click #55

Closed Heet-Bhalodiya closed 3 months ago

Heet-Bhalodiya commented 4 months ago

Version of the library: 1.2.4

Expected Behavior

The library should provide properties that allow direct modification of the input styles.

Current Behavior

Screenshots of the issue are attached for reference:

CPT2406201907-485x312

image

When clicking on the slot, an additional 40px width is added to the input element. To address this issue, I have to add the following styles in the global.css file:

input[autocomplete='one-time-code'][data-input-otp='true'] {
  inline-size: 100% !important;
}

I appreciate your assistance in resolving this matter.

guilhermerodz commented 4 months ago

Hey @Heet-Bhalodiya I don't get your request.

Have you tried using className to override the styles of the input?

Also, it isn't recommended to modify the default input style by the library; I suggest you just modify the style of the components rendered inside the render prop

guilhermerodz commented 3 months ago

Closing issue temporarily as there's no response from author @Heet-Bhalodiya

Will reopen once you reply! Thanks for opening the issue.