From 685a3dcf308f2557c5cc082e00c534ff463989ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B4=8B?= <hetongyang@bytedance.com>
Date: Fri, 19 May 2023 11:51:10 +0800
Subject: [PATCH] fix: groupLabel

---
 src/utils/valueUtil.ts                   |   2 +-
 tests/Select.test.tsx                    |  21 +--
 tests/__snapshots__/Select.test.tsx.snap | 228 ++++++++++++++++++++++-
 3 files changed, 229 insertions(+), 22 deletions(-)

diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
index afafbf63..45db446f 100644
--- a/src/utils/valueUtil.ts
+++ b/src/utils/valueUtil.ts
@@ -53,7 +53,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
   function dig(list: OptionType[], isGroupOption: boolean) {
     list.forEach((data) => {
 
-      const label = data[isGroupOption ? groupLabel : fieldLabel];
+      const label = data[isGroupOption ? fieldLabel : groupLabel];
 
       if (isGroupOption || !(fieldOptions in data)) {
         const value = data[fieldValue];
diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
index 0be3d330..fb9b793b 100644
--- a/tests/Select.test.tsx
+++ b/tests/Select.test.tsx
@@ -107,13 +107,13 @@ describe('Select.Basic', () => {
 
     it('should support fieldName', () => {
       // groupLabel > fieldNames > self-label
-      function genOpts(OptLabelName) {
+      function genOpts(OptLabelName, groupLabel) {
         return [
           {
-            groupLabel: 'Manager',
+            [groupLabel]: 'groupLabel',
             options: [
               {
-                data: 'value',
+                value: 'value',
                 [OptLabelName]: 'label',
               },
             ],
@@ -123,25 +123,22 @@ describe('Select.Basic', () => {
 
       const { container: containerFirst } = testingRender(
         <Select
-          options={genOpts('test')}
+          options={genOpts('label', 'groupLabel')}
           fieldNames={{
-            value: 'data',
-            label: 'test',
             groupLabel: 'groupLabel',
           }}
+          open
         />,
       );
       const { container: containerSecond } = testingRender(
         <Select
-          options={genOpts('groupLabel')}
-          fieldNames={{ value: 'data', label: 'groupLabel' }}
+          options={genOpts('groupLabel', 'groupLabel')}
+          fieldNames={{ label: 'groupLabel' }}
+          open
         />,
       );
       const { container: containerThird } = testingRender(
-        <Select
-          options={genOpts('noGroupLabel')}
-          fieldNames={{ value: 'data', label: 'noGroupLabel' }}
-        />,
+        <Select options={genOpts('label', 'label')} open />,
       );
 
       // these generate the same snapshots
diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap
index 4e27a106..daf7ffd2 100644
--- a/tests/__snapshots__/Select.test.tsx.snap
+++ b/tests/__snapshots__/Select.test.tsx.snap
@@ -436,7 +436,7 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
 exports[`Select.Basic render should support fieldName 1`] = `
 <div>
   <div
-    class="rc-select rc-select-single rc-select-show-arrow"
+    class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
   >
     <div
       class="rc-select-selector"
@@ -445,10 +445,10 @@ exports[`Select.Basic render should support fieldName 1`] = `
         class="rc-select-selection-search"
       >
         <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+          aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
           aria-autocomplete="list"
           aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="false"
+          aria-expanded="true"
           aria-haspopup="listbox"
           aria-owns="rc_select_TEST_OR_SSR_list"
           autocomplete="off"
@@ -466,6 +466,76 @@ exports[`Select.Basic render should support fieldName 1`] = `
         class="rc-select-selection-placeholder"
       />
     </div>
+    <div
+      class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
+    >
+      <div>
+        <div
+          id="rc_select_TEST_OR_SSR_list"
+          role="listbox"
+          style="height: 0px; width: 0px; overflow: hidden;"
+        >
+          <div
+            aria-selected="false"
+            id="rc_select_TEST_OR_SSR_list_0"
+            role="presentation"
+          />
+          <div
+            aria-label="label"
+            aria-selected="false"
+            id="rc_select_TEST_OR_SSR_list_1"
+            role="option"
+          >
+            value
+          </div>
+        </div>
+        <div
+          class="rc-virtual-list"
+          style="position: relative;"
+        >
+          <div
+            class="rc-virtual-list-holder"
+            style="max-height: 200px; overflow-y: auto;"
+          >
+            <div>
+              <div
+                class="rc-virtual-list-holder-inner"
+                style="display: flex; flex-direction: column;"
+              >
+                <div
+                  class="rc-select-item rc-select-item-group"
+                  title="groupLabel"
+                >
+                  groupLabel
+                </div>
+                <div
+                  aria-selected="false"
+                  class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
+                  title="label"
+                >
+                  <div
+                    class="rc-select-item-option-content"
+                  >
+                    label
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="rc-select-item-option-state"
+                    style="user-select: none;"
+                    unselectable="on"
+                  >
+                    <span
+                      class="rc-select-item-option-state-icon"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <span
       aria-hidden="true"
       class="rc-select-arrow"
@@ -483,7 +553,7 @@ exports[`Select.Basic render should support fieldName 1`] = `
 exports[`Select.Basic render should support fieldName 2`] = `
 <div>
   <div
-    class="rc-select rc-select-single rc-select-show-arrow"
+    class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
   >
     <div
       class="rc-select-selector"
@@ -492,10 +562,10 @@ exports[`Select.Basic render should support fieldName 2`] = `
         class="rc-select-selection-search"
       >
         <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+          aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
           aria-autocomplete="list"
           aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="false"
+          aria-expanded="true"
           aria-haspopup="listbox"
           aria-owns="rc_select_TEST_OR_SSR_list"
           autocomplete="off"
@@ -513,6 +583,76 @@ exports[`Select.Basic render should support fieldName 2`] = `
         class="rc-select-selection-placeholder"
       />
     </div>
+    <div
+      class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
+    >
+      <div>
+        <div
+          id="rc_select_TEST_OR_SSR_list"
+          role="listbox"
+          style="height: 0px; width: 0px; overflow: hidden;"
+        >
+          <div
+            aria-selected="false"
+            id="rc_select_TEST_OR_SSR_list_0"
+            role="presentation"
+          />
+          <div
+            aria-label="label"
+            aria-selected="false"
+            id="rc_select_TEST_OR_SSR_list_1"
+            role="option"
+          >
+            value
+          </div>
+        </div>
+        <div
+          class="rc-virtual-list"
+          style="position: relative;"
+        >
+          <div
+            class="rc-virtual-list-holder"
+            style="max-height: 200px; overflow-y: auto;"
+          >
+            <div>
+              <div
+                class="rc-virtual-list-holder-inner"
+                style="display: flex; flex-direction: column;"
+              >
+                <div
+                  class="rc-select-item rc-select-item-group"
+                  title="groupLabel"
+                >
+                  groupLabel
+                </div>
+                <div
+                  aria-selected="false"
+                  class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
+                  title="label"
+                >
+                  <div
+                    class="rc-select-item-option-content"
+                  >
+                    label
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="rc-select-item-option-state"
+                    style="user-select: none;"
+                    unselectable="on"
+                  >
+                    <span
+                      class="rc-select-item-option-state-icon"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <span
       aria-hidden="true"
       class="rc-select-arrow"
@@ -530,7 +670,7 @@ exports[`Select.Basic render should support fieldName 2`] = `
 exports[`Select.Basic render should support fieldName 3`] = `
 <div>
   <div
-    class="rc-select rc-select-single rc-select-show-arrow"
+    class="rc-select rc-select-single rc-select-show-arrow rc-select-open"
   >
     <div
       class="rc-select-selector"
@@ -539,10 +679,10 @@ exports[`Select.Basic render should support fieldName 3`] = `
         class="rc-select-selection-search"
       >
         <input
-          aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+          aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
           aria-autocomplete="list"
           aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="false"
+          aria-expanded="true"
           aria-haspopup="listbox"
           aria-owns="rc_select_TEST_OR_SSR_list"
           autocomplete="off"
@@ -560,6 +700,76 @@ exports[`Select.Basic render should support fieldName 3`] = `
         class="rc-select-selection-placeholder"
       />
     </div>
+    <div
+      class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0; width: 0px;"
+    >
+      <div>
+        <div
+          id="rc_select_TEST_OR_SSR_list"
+          role="listbox"
+          style="height: 0px; width: 0px; overflow: hidden;"
+        >
+          <div
+            aria-selected="false"
+            id="rc_select_TEST_OR_SSR_list_0"
+            role="presentation"
+          />
+          <div
+            aria-label="label"
+            aria-selected="false"
+            id="rc_select_TEST_OR_SSR_list_1"
+            role="option"
+          >
+            value
+          </div>
+        </div>
+        <div
+          class="rc-virtual-list"
+          style="position: relative;"
+        >
+          <div
+            class="rc-virtual-list-holder"
+            style="max-height: 200px; overflow-y: auto;"
+          >
+            <div>
+              <div
+                class="rc-virtual-list-holder-inner"
+                style="display: flex; flex-direction: column;"
+              >
+                <div
+                  class="rc-select-item rc-select-item-group"
+                  title="groupLabel"
+                >
+                  groupLabel
+                </div>
+                <div
+                  aria-selected="false"
+                  class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
+                  title="label"
+                >
+                  <div
+                    class="rc-select-item-option-content"
+                  >
+                    label
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="rc-select-item-option-state"
+                    style="user-select: none;"
+                    unselectable="on"
+                  >
+                    <span
+                      class="rc-select-item-option-state-icon"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <span
       aria-hidden="true"
       class="rc-select-arrow"