'Remove input focus border in react select

This is my styles config. Im using tailwindcss also.

export const colourStyles: StylesConfig = {
  control: (styles, { isFocused }) => ({
    ...styles,
    backgroundColor: 'white',
    border: '2px solid #E2E2E2',
    '&:hover': {
      border: '2px solid #141414',
    },
    borderRadius: '0.5rem',
    borderBottomLeftRadius: isFocused ? 0 : '',
    borderBottomRightRadius: isFocused ? 0 : '',
    boxShadow: '0px 2px 0px rgba(0, 0, 0, 0.04)',
  }),
  menu: (styles) => ({
    ...styles,
    height: 345,
    marginTop: '0px',
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    border: '2px solid #E2E2E2',
    borderTop: 'none',
    boxShadow:
      '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
  }),
  option: (styles, { isSelected }) => {
    return {
      ...styles,
      backgroundColor: isSelected ? '#f6f6f6' : 'white',
      color: isSelected ? '#141414' : '',
      '&:hover': {
        backgroundColor: '#f6f6f6',
      },
      paddingBottom: 0,
      paddingTop: 0,
      paddingLeft: 16,
      paddingRight: 16,
    };
  },
  input: (styles) => ({
    ...styles,
  }),
  menuList: (styles) => ({
    ...styles,
    padding: '6px 0px',
    minHeight: 343,
  }),
  placeholder: (styles) => ({ ...styles, fontSize: 14 }),
  singleValue: (styles) => ({ ...styles }),
};

this is my select component

const SingleValue = ({ children, ...props }: SingleValueProps) => {
  return (
    <components.SingleValue {...props}>
      {/* @ts-ignore */}
      {props?.selectProps?.value?.text ? (
        // @ts-ignore
        <div>{props?.selectProps?.value.text}</div>
      ) : (
        children
      )}
    </components.SingleValue>
  );
};


<Select
            {...field}
            blurInputOnSelect
            options={options}
            styles={colourStyles}
            placeholder={placeholder}
            components={{
              IndicatorSeparator: () => null,
              SingleValue,
            }}
            value={options.find((each) => each.value === field.value)}
            onChange={(newValue: any) => {
              field.onChange(newValue.value);
            }}
          />

image for reference



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source