[BUG] - Input slot override styles not working for pseudo-classes

[danhendersonede]

HeroUI Version

@heroui/[email protected]

Describe the bug

When adding styles to pseudo-classes of the slots of within Input, they are not applied or immediately overridden.

For example: adding hover-bg-blue-500 to inputWrapper results in a blue background when the cursor is hovering on the input during a reload. But if the user triggers onBlur, and then triggers onHover again, the styles are not applied (see video).

Your Example Website or App

https://stackblitz.com/edit/stackblitz-starters-kg41cf2d?file=app%2Fpage.tsx

Steps to Reproduce the Bug or Issue

1. Add a classNames prop to <Input>
2. Override a pseudo class styles for inputWrapper, or any other slot in Input
3. Observe not styling changes for pseudo-classes

            <Input
              className="w-96"
              classNames={{
                label: [
                  "text-black/80 dark:text-white/80",
                  "invalid:text-blue-100",
                ],
                input: ["text-black/90 dark:text-white/90"],
                inputWrapper: [
                  "border-2 border-solid",
                  "border-slate-600 dark:border-slate-600",
                  "invalid:border-blue-500",
                  "bg-white dark:bg-black",
                  "hover:bg-blue-500",
                  "data-invalid:bg-blue-500",
                ],
                description: "text-black/90 dark:text-white/90",
                errorMessage: "text-red-700 dark:text-red-400",
              }}
            />

Expected behavior

As a user, I expect the styles for pseudo-classes on slots to apply to the Input component, so that I can style states such as invalid and hover.

I have attempted to override with both [class]-[style], data-[class]-[style], and creating new CSS modules, however they result in the same outcome.

Screenshots or Videos

Screen.Recording.2025-02-19.at.11.19.19.PM.mov

Operating System Version

MacOS

Browser

Chrome

[linear]

ENG-2116 [BUG] - Input slot override styles not working for pseudo-classes

[AnYiEE]

try data-[hover=true]:bg-blue-500 ?

[danhendersonede]

Strange! data-[hover=true]:bg-blue-500 only works on the inputWrapper. I tried putting it on the input slot and that did not work. I also used the same Tailwind convention for the other core data attributes on inputWrapper, but they did not work either.

I have updated my example website link to reflect the code below:

<Input
  label="Hover"
  classNames={{
    inputWrapper: ['data-[hover=true]:bg-blue-700'], // The only one that applies
    input: ['data-[hover=true]:text-white'], //Does not apply
  }}
/>
<Input
  isInvalid
  label="Invalid"
  classNames={{
    inputWrapper: ['data-[invalid=true]:bg-blue-700'], //Does not apply
    input: ['data-[invalid=true]:text-white'], //Does not apply
  }}
/>
<Input
  label="Focus"
  classNames={{
    inputWrapper: [
      'data-[focus-visible=true]:bg-blue-700', //Does not apply
      'data-[focus-within=true]:bg-blue-700', //Does not apply
      'data-[focus=true]:bg-blue-700', //Does not apply
    ],
    input: [
      'data-[focus-visible=true]:text-white', //Does not apply
      'data-[focus-within=true]:text-white', //Does not apply
      'data-[focus=true]:text-white', //Does not apply
    ],
  }}
/>
<Input
  isDisabled
  label="Disabled"
  classNames={{
    inputWrapper: ['data-[disabled=true]:bg-blue-700'], //Does not apply
    input: ['data-[disabled=true]:text-white'], //Does not apply
  }}
/>

[AnYiEE]

I think you can know how the styles are defined by looking at the style file and override exactly. https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/input.ts