themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.85k stars 740 forks source link

Using paste in the Pin code input causes issues #954

Closed TNXG closed 3 days ago

TNXG commented 1 month ago

Describe the bug When using the Pin code input feature within a number-input component, pasting a verification code only pastes the character into the first input field, while the remaining digits are omitted. This behavior can significantly affect the user experience, as typically, pasting a verification code should fill all input fields.

To Reproduce

It seems that this issue is also present in the official documentation for this feature: number-input/#pin-code-input

Expected behavior

When pasting a multi-digit verification code, it should automatically fill in the corresponding fields.

Screenshots

recording

Desktop (please complete the following information):

System:
    OS: Windows 11 10.0.22631
    CPU: (6) x64 Intel(R) Core(TM) i5-9600KF CPU @ 3.70GHz
    Memory: 11.32 GB / 23.94 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.9.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @nuxt/kit: ^3.13.0 => 3.13.0
    flowbite: ^2.5.1 => 2.5.1
    nuxt: ^3.13.0 => 3.13.0
    vite: ^5.4.2 => 5.4.2
    vue: ^3.4.38 => 3.4.38
LLLongA commented 1 week ago

I fix this issue and start a pull request in #979.

TNXG commented 3 days ago

Considering that the issue has been resolved by the relevant PR and has been merged, this issue will be closed.