react-select v4.3.1 - Unexpected border while typing text

There is an unexpected blue border when I type text. Please check the image. I tried editing control styles by setting border zero or none and even removed boxShadow. But nothing works. Please check the image.

control: (provided) => ({ ...provided, boxShadow: 'none', border: 0, }),

[SimranDev]

Thanks for the advice. While inspecting I figure out tailwindcss-forms plugin was overriding box-shadow on focus. So I found two solutions to it.

1. Remove plugin from tailwind.config.js file. Basically remove this line require('@tailwindcss/forms').
2. If you can’t afford to remove the plugin. Just override it by passing CSS class around your Select component. I added this and it resolved the issue created by tailwindcss. .remove-input-txt-border input[type='text']:focus { box-shadow: none; }

<div className="remove-input-txt-border">
    <Select />
</div>

Thanks again @ebonow

[donnfelker]

Thank you! I’ve been trying to figure this rogue box out forever now.