Dropdown (Tailwind): Focus shadow not working

[sdwillbrand]

Describe the bug

The dropdown does not show a shadow when focused.

Reproducer

https://codesandbox.io/p/sandbox/frosty-hoover-ttd938

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Create Dropdown
2. Focus Dropdown

Expected behavior

The dropdown should have a shadow

[melloware]

Not sure what you mean by Shadow? @Dalorzo

[Dalorzo]

@melloware taking a look at this moment, will revert in a bit

[Dalorzo]

@countersoda can you please elaborate why the dropdown should have a shadow? Is this because of a dark mode?

[Dalorzo]

@melloware I found what I think could be the issue:

From docs, I can update the input area, however, any styling applied to input does not get reflected while using the dropdown, more specifically or problematic focus, hover, active.

The styles are set to the input correctly, those are just not visible to user,

<Dropdown
          options={items}
          value={value}
          pt={{
            input: {
              className: "bg-blue-50 focus:bg-blue-900  active:bg-blue-700",
            },
          }}
          onChange={(e) => setValue(e.value)}
        />

[sdwillbrand]

As you can see the dropdown is focused. The style focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] should apply to the dropdown, but it is not. I thought a shadow appears around the dropdown when an item is being selected.

[melloware]

@Dalorzo when I compare to AutoComplete input element its different than what Dropdown input is doing this is what AutoCompelte has.

        input: ({ props }) => ({
            root: {
                className: classNames(
                    'm-0',
                    'transition-colors duration-200 appearance-none rounded-lg',
                    { 'rounded-tr-none rounded-br-none': props.dropdown },
                    {
                        'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
                            !props.multiple,
                        'font-sans text-base text-gray-700 dark:text-white/80 border-0 outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full': props.multiple
                    }
                )
            }
        }),

[Dalorzo]

As you can see the dropdown is focused. The style focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] should apply to the dropdown, but it is not. I thought a shadow appears around the dropdown when an item is being selected.

@countersoda I think you are correct, I was able to workaround the issue of the data-pc-section="input" by adding the attribute tabindex="0". However, I am not sure what the right solution is, I will defer to @melloware

[melloware]

I see if you do this even with tabIndex="-1" you can see it.

        <Dropdown
          options={items}
          value={value}
          onChange={(e) => setValue(e.value)}
          pt={{
            input: {
              className: "bg-blue-50 focus:bg-blue-900 active:bg-blue-700",
              tabIndex: "-1",
            },
          }}
        />

[melloware]

@Dalorzo where did we end up on this?