reactjs - 带有反应选择的焦点小组

Question

我正在使用来自 react-select using groups 的自定义 Select 元素。用户应该能够使用箭头键浏览选项。这适用于选项，但不适用于组，因为当用户使用箭头键浏览选项时会跳过组（参见示例）。

由于用户应该能够与 grouplabel 中的复选框进行交互，因此允许使用键盘在选项和组中导航会很好。这是受支持的功能还是有人试图实现这种行为？

例子

用户界面

代码

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

interface SelectOption {
    label: string,
    value: string
}

export const GroupedSelect = () => {
    return <Select
        options={getOptions()}
        isSearchable={true}
        isMulti={true}
        formatGroupLabel={formatLabel}
        formatOptionLabel={formatLabel}
    />
}

const formatLabel = (group: GroupTypeBase<any>) => {
    return <div>
        <input type={"checkbox"}/>
        {group.label}
    </div>
}

const getOptions: () => GroupTypeBase<SelectOption>[] = () => {
    return [
        {
            label: "Foo Group",
            options: createGroupSelectOptions("Foo")
        },
        {
            label: "Bar Group",
            options: createGroupSelectOptions("Bar")
        },
        {
            label: "Baz Group",
            options: createGroupSelectOptions("Baz")
        },
    ]
}

const createGroupSelectOptions: (groupName: string, groupSize?: number) => SelectOption[] = (groupName: string, groupSize = 3) => {
    const ary = new Array(groupSize).fill("").map((_, idx) => {
        return {
            label: `${groupName} ${idx}`, value: `${groupName} ${idx}`
        }
    })
    console.log(ary)
    return ary
}

标签： reactjsreact-select