react-select dropdown not showing cursor

Question

I have a react-select Select component that renders a searchable dropdown menu.

Here is a Sandbox: https://codesandbox.io/s/lingering-paper-eb4lr?fontsize=14&hidenavigation=1&theme=dark

For some reason, I can't seem to get the cursor to display. The search functionality works fine. I can type in the field but the cursor does not display at all. When looking at the example snippets on the website, the cursor shows appropriately.

In my code, I have a blue dropdown background with white text. I also made the cursor white in the styles object.

<Select
    value={currentValue}
    placeholder="N/A"
    components={{ IndicatorSeparator: () => null }}
    onChange={(val: any) => { // do stuff }}
    isSearchable={true}
    autoBlur={true}
    openMenuOnFocus={true}
    options={options}
    styles={getStyles()}
/>

getStyles():

{
    control: (provided: any, state: any) => ({
        ...provided,
        color: 'white',
        backgroundColor: 'blue',
        fontSize: '1rem',
        width: '250px',
        borderRadius: '0px',
        borderStyle: 'none',
        padding: '0 0.5rem 0 0.5rem',
        cursor: 'text',
    }),
    option: (provided: any, state: any) => ({
        ...provided,
        fontWeight: '400',
        color: 'black',
        backgroundColor: 'white',
        fontSize: '1rem',
        padding: '0.25rem 0.5rem 0.25rem 0.5rem',
        cursor: 'pointer',
        '&:hover': { backgroundColor: '#F5F5F5' },
    }),
    menu: (provided: any, state: any) => ({
        ...provided,
        fontWeight: '400',
        color: MEDICAL_BLUE,
        backgroundColor: 'white',
        fontSize: '1rem',
        padding: '0.25rem 0.5rem 0.25rem 0.5rem',
        borderRadius: '0px',
        borderStyle: 'none',
    }),
    singleValue: (provided: any, state: any) => ({
        ...provided,
        color: 'white',
        backgroundColor: MEDICAL_BLUE,
        fontSize: '1rem',
    }),
    input: (provided: any, state: any) => {
        return {
            ...provided,
            color: 'white',
        };
    },
    placeholder: (provided: any, state: any) => {
        return {
            ...provided,
            color: 'white',
        };
    },
    dropdownIndicator: (provided: any, state: any) => {
        return {
            ...provided,
            color: 'white',
            '&:hover': { color: '#F5F5F5' },
        };
    },
};

Any help is greatly appreciated.

Edit: Here is a Sandbox showing the behavior I'm seeing. As you can see, without anything selected, I can see the cursor when clicking in the dropdown. However, once I select a value, clicking on the menu again shows no cursor.

it looks like it should work, might be a caching issue; try ctrl+f5. are you able to create a sandbox to replicate the issue? — 95faf8e76605e973
@95faf8e76605e973 Yes, I edited the original post to include a Sandbox — noblerare
the sandbox works for me, I can see the cursor, I'm using G chrome on Ubuntu 20.04 — Yoandry Collazo

95faf8e76605e973 95faf8e76605e973 · Accepted Answer · 2020-08-03T20:36:13

It looks like the main issue is because of the background color of the value selected on the dropdown. In fact, if you give it transparent as value, it works. It's probably covering the cursor. Primarily addressing the OP that you can still retain the background color of blue for your dropdown but just remove the background color of the value selected

singleValue: (provided: any, state: any) => ({
    ...provided,
    color: "white",
    // backgroundColor: "#004080", // comment this out
    fontSize: "1rem"
}),

react-select dropdown not showing cursor

2 Answers