react-component / react-component/select

OptGroup 是故意被限制嵌套使用吗

Open
#908 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
938
Forks
482
Avg merge
15h 8m
Merged PRs (30d)
2

Description

官方文档和示例关于 OptGroup 的说明太少了,我发现 OptGroup 是故意被限制了嵌套使用,即 Select 只能支持一级分组。

在 src/utils/valueUtils.ts 第 54 行:

function dig(list: OptionType[], isGroupOption: boolean) {
    list.forEach((data) => {
      const label = data[fieldLabel];

      if (isGroupOption || !(fieldOptions in data)) {  // isGroupOption 限制了进一步递归更深层的 Group
        const value = data[fieldValue];

        // Option
        flattenList.push({
          key: getKey(data, flattenList.length),
          groupOption: isGroupOption,
          data,
          label,
          value,
        });
      } else {
        let grpLabel = label;
        if (grpLabel === undefined && childrenAsData) {
          grpLabel = data.label;
        }

        // Option Group
        flattenList.push({
          key: getKey(data, flattenList.length),
          group: true,
          data,
          label: grpLabel,
        });

        dig(data[fieldOptions], true);
      }
    });
  }

文档上没有说明分组仅限于一级,实现上也没有对内嵌分组容错(造成页面上某一个 Group 被显示成了 GroupOption,但实际上又无法选中),目前的样式没有准备做进一步内嵌的展示样式(当然实际上在这种选择框下面做过多内嵌展示也不友好)。

希望可以在文档上明确一下功能说明,明确说明此处不支持一级以上的分组,或者干脆就直接支持多级分组。

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the OptGroup handling in src/utils/valueUtils.ts around line 54, then inspect the official Select documentation and examples for their current grouping guidance. Done means documenting the supported nesting behavior and its limitation, or recording the agreed behavior if the project chooses to support deeper groups.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.