react-select 下拉菜单不显示光标

Question

我有一个 react-select Select 组件可以呈现可搜索的下拉菜单。

这是一个沙盒：https://codesandbox.io/s/lingering-paper-eb4lr?fontsize=14&hidenavigation=1&theme=dark

出于某种原因，我似乎无法显示光标。搜索功能运行良好。我可以在字段中输入，但光标根本不显示。查看网站上的示例片段时，光标显示正确。

在我的代码中，我有一个带有白色文本的蓝色下拉菜单背景。我还在样式对象中将光标设为白色。

<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' },
        };
    },
};

非常感谢任何帮助。

编辑：这是一个沙盒，显示了我所看到的行为。如您所见，没有任何 selected，在下拉菜单中单击时我可以看到光标。然而，一旦我 select 一个值，再次点击菜单显示没有光标。

Answer 1

我能够弄清楚自己的问题，所以我写这篇文章是为了帮助未来的灵魂。

事实证明，singleValue 样式键为删除任何光标的下拉输入选择的值设置样式。我还没有发现任何解决方法，但是删除 singleValue 样式键和 re-styling 我的下拉菜单以使用白色背景而不是深蓝色背景对我有用。

Answer 2

看起来主要问题是因为在下拉列表中选择的值的背景颜色。事实上，如果你给它 transparent 作为值，它就可以工作。它可能覆盖了光标。主要解决 OP，您仍然可以为下拉菜单保留蓝色背景色，但只需删除所选值的背景色

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

react-select 下拉菜单不显示光标

react-select dropdown not showing cursor

reactjs

react-select