[BUG] The Input's style came with a extra border when autoFucus

[czn574775237]

NextUI Version

2.2.9

Describe the bug

When I use the component "Input" with autoFocus, it came with an unexpeced blue border around the input box. As I remove 'autoFocus', the border will not be display.

improt { Input } from "@nextui-org/react";
<Input
    autoFocus
    className={styles["input-container"]}
    value={searchText}
    onChange={onChangeSearchText}
    size="lg"
    radius="none"
    ref={searchRef}
    placeholder="talk..."
    onKeyUp={onSearchInputKeyUp}
    autoComplete="off"
    endContent={<Chip color="primary">{featurePrompt.name}</Chip>}
  />

And I found the border is at the dom node <div data-slot="input-wrapper" ... /> with the box-shadow.

So I had to add this style to hide the border and it work.

.input-container [data-slot="input-wrapper"] {
  box-shadow: none !important;
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

improt { Input } from "@nextui-org/react";
<Input
    autoFocus
    value={searchText}
    onChange={onChangeSearchText}
    size="lg"
    radius="none"
    ref={searchRef}
    placeholder="talk..."
    onKeyUp={onSearchInputKeyUp}
    autoComplete="off"
    endContent={<Chip color="primary">{featurePrompt.name}</Chip>}
  />

Expected behavior

it came with an unexpeced blue border around the input box when the input setting autoFocus.

Screenshots or Videos

Operating System Version

Windows

Browser

Edge

[shaderzz]

Just add this classNames slot to Input component to fix this: <Input ... classNames={{ inputWrapper: [ "group-data-[focus-visible=true]:ring-0 group-data-[focus-visible=true]:ring-offset-0" ] }} ... />

[LeakedDave]

Just add this classNames slot to Input component to fix this: <Input ... classNames={{ inputWrapper: [ "group-data-[focus-visible=true]:ring-0 group-data-[focus-visible=true]:ring-offset-0" ] }} ... />

Crazy we have to do this lol. Problem is though, it disables the blue highlight permanently for tabbing around and accessibility.

How to fix?

const [hasBlurred, setHasBlurred] = useState(false)

<Input classNames={{
    inputWrapper: cn(!hasBlurred ? ["group-data-[focus-visible=true]:ring-0 group-data-[focus-visible=true]:ring-offset-0"] : null)
}}
    onBlur={() => setHasBlurred(true)}}
/>

A real fix would have autofocus simulate a click or something on the input, instead of a hard focus, so we don't get the blue outline initially.

[cambiauto]

I've tried this in autocomplete component, but didn't work. another solution?

Just add this classNames slot to Input component to fix this: <Input ... classNames={{ inputWrapper: [ "group-data-[focus-visible=true]:ring-0 group-data-[focus-visible=true]:ring-offset-0" ] }} ... />

its to difficult change border color in nextui components 😢