ui icon indicating copy to clipboard operation
ui copied to clipboard

Published 20 hours ago • verified publisher icon shadcn-ui

[Bug]: Input OTP strange bug

Open Eldevia opened this issue 11 months ago • 1 comments

Describe the bug

image image

Affected component/components

Input OTP

How to reproduce

  1. Open up https://ui.shadcn.com/docs/components/input-otp
  2. Input otp
  3. select the otp once

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

- MacOS Intel
- Firefox Developer Edition

Before submitting

  • [X] I've made research efforts and searched the documentation
  • [X] I've searched for existing issues

Eldevia avatar Mar 21 '24 16:03 Eldevia

Hi @Eldevia I tried reproducing the bug locally with macOS Sonoma in a Macbook M1 Pro 14''. Couldn't reproduce it.

Can you please inspect the element and check what's the color value there? Should be color: transparent and nothing else

Thanks

https://github.com/shadcn-ui/ui/assets/10366880/3512427e-f42a-4285-8289-2608f92cbf1e

guilhermerodz avatar Mar 21 '24 18:03 guilhermerodz

Had the same bug because of a global.css setting for the text. Removing it make the text transparent again.

@layer base {
  body {
    @apply bg-background text-primary;
  }

}

andrewdoro avatar Mar 24 '24 13:03 andrewdoro

adding selection:text-transparent to the input also fixes it. ~~Will add a PR for this~~

 className={cn(
      'selection:text-transparent disabled:cursor-not-allowed',
      className,
    )}

andrewdoro avatar Mar 24 '24 13:03 andrewdoro

hey @andrewdoro you should get rid of this bug by updating:

> npm install input-otp@latest

thanks for contributing to input-otp!

@Eldevia does it work now in the latest version?

guilhermerodz avatar Mar 25 '24 02:03 guilhermerodz