Is this a tailwind project issue? I can't override the class / style options

[alextaymx]

can anyone help me on this? i am using tailwind in react js. The input seems weird

the there is an empty small box on top of the placeholder, i can't right click in the input because the width is too small ,
I wish to paste something inside the input, which requires me to increase the input width so that i can right click inside.
anyone can help me on this? thanks in advance

[donnfelker]

@alextaymx I'm having this exact same problem. That weird border. I'm also using Tailwind and cannot seem to figure out whats causing it.

[ebonow]

@alextaymx this would likely be due to styling applied to a focused input.

const styles = {
  input: (css) => ({
    ...css,
    input: {
      outline: none;
    }
  })
}

return <Select styles={styles} {...otherProps} />

With new version 5 (currently in beta) there was a prop added to the Input component that allows a className to be directly added to the Input specifically to make it easier to work with TailwindCSS.

const Input = props => <components.Input {...props} inputClassName="outline-none" />
return <Select components={{ Input }} {...otherProps} />

[ebonow]

I will close this for now, but if you are still having issues, please let me know and we can reopen this if necessary.

[alextaymx]

Thanks @ebonow for the clarification! Turns out it was due to a tailwind form plugin , I fix it using your props and also some css overwrite, thanks a lot.

@donnfelker did u fix it?

[wh1le]

@ebonow, @alextaymx solution above didn't work for me. I'm on ^5.0.0-beta.0 and this one works:

import Select, { components } from 'react-select'

const Input = props => (
  <components.Input 
     {...props} 
     inputClassName="outline-none border-none shadow-none focus:ring-transparent"
  />
)

...


  render() {
    return (
      <Select
        value={this.state.selectedOption}
        onChange={this.props.onChangeEvent}
        options={this.props.options}
        components={{ Input }}
      />
    );
  }

[mcunningham]

@alextaymx @ebonow @donnfelker @wh1le
The reason this occurs is likely due to the fact that you are using @tailwindcss/forms which add default styles to all input[type='text'] (used in the underlying react-select input). I found that removing the input type also worked for me as @tailwindcss/forms didn't apply the default styles. For example:

const Input = ({ type, ...rest }: InputProps) => <components.Input {...rest} />;

[karimdaghari]

In case anyone wants a (pure) css solution

.custom-select__input {
  @apply ring-0 !important;
}

p.s: custom-select is set through the className prop.

[kohheepeace]

This is my solution

const customStyles: StylesConfig = {
  input: (provided, state) => ({
    ...provided,
    "input:focus": {
      boxShadow: "none",
    },
  }),
};

...

<Select
 ...
  styles={customStyles}
/>

[vamsikrishnareddybevara]

I am facing the same issue. I tried the above solutions. It removed the outline but the width of the input remains the same.

Did anyone face a similar issue?

[Kaceykaso]

I am still seeing this floating, disconnected select option set in the upper left of the UI. I am not using tailwindcss/forms, and basic HTML elements. The above "solutions" have not worked. I am on the latest.