fix: select controled with same label text in reactNode, close #2284

DouyinFE · Jun 20, 2024 · 4fd8f87 · 4fd8f87
1 parent 9339ff8
commit 4fd8f87
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/cypress/e2e/select.spec.js b/cypress/e2e/select.spec.js
@@ -178,6 +178,19 @@ describe('Select', () => {
         cy.get('.render-content').eq(0).should('have.text', 'AA-Label-2-AA-OtherProps-2')
 
     });
+
+    it('Controled mode, same label text in reactNode', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--controled-same-label-in-node');
+        cy.get('[data-cy=singleControl]').click();
+        cy.get('[data-cy=a-1]').click();
+        cy.get('[data-cy=singleControl]').click(); // show optionList again
+        cy.get('[data-cy=a-1]').should('have.class', 'semi-select-option-selected');
+
+        cy.get('[data-cy=singleControl]').click();
+        cy.get('[data-cy=a-2]').click();
+        cy.get('[data-cy=singleControl]').click(); // show optionList again
+        cy.get('[data-cy=a-2]').should('have.class', 'semi-select-option-selected');
+    });
     // it('ellipsisTrigger', () => {
     //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--fix-1560');
 

diff --git a/packages/semi-foundation/select/foundation.ts b/packages/semi-foundation/select/foundation.ts
@@ -988,18 +988,21 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     }
 
     _diffSelections(selections: Map<any, any>, oldSelections: Map<any, any>, isMultiple: boolean) {
-        let diff = true;
+        let diffLabel = true, diffValue = true;
         if (!isMultiple) {
             const selectionProps = [...selections.values()];
             const oldSelectionProps = [...oldSelections.values()];
+            const optionValue = selectionProps[0] ? selectionProps[0].value : selectionProps[0];
+            const oldOptionValue = oldSelectionProps[0] ? oldSelectionProps[0].value : oldSelectionProps[0];
+            diffValue = !isEqual(optionValue, oldOptionValue);
             const optionLabel = selectionProps[0] ? selectionProps[0].label : selectionProps[0];
             const oldOptionLabel = oldSelectionProps[0] ? oldSelectionProps[0].label : oldSelectionProps[0];
-            diff = !isEqual(optionLabel, oldOptionLabel);
+            diffLabel = !isEqual(optionLabel, oldOptionLabel);
         } else {
             // When multiple selection, there is no scene where the value is different between the two operations
         }
-        return diff;
-    }
+        return diffValue || diffLabel;
+    } 
 
     // When onChangeWithObject is true, the onChange input parameter is not only value, but also label and other parameters
     _notifyChangeWithObject(selections: Map<any, any>) {

diff --git a/packages/semi-ui/_base/_story/a11y.jsx b/packages/semi-ui/_base/_story/a11y.jsx
@@ -1106,7 +1106,7 @@ export default function SemiA11y() {
                                 </Form>
                             </Row>
                             <Row>
-                                <Col span="12">
+                                <Col span={12}>
                                     <Tree
                                         treeData={treeData}
                                         defaultExpandAll
@@ -1117,7 +1117,7 @@ export default function SemiA11y() {
                                         }}
                                     />
                                 </Col>
-                                <Col span="12">
+                                <Col span={12}>
                                     <Transfer
                                         style={{ width: 568, height: 416 }}
                                         dataSource={transferData}

diff --git a/packages/semi-ui/select/_story/select.stories.jsx b/packages/semi-ui/select/_story/select.stories.jsx
@@ -3567,4 +3567,26 @@ export const UpdateOtherKeyNotInList = () => {
       <Button id='change' onClick={() => change()}>change</Button>
     </>
   );
-};
+};
+
+
+export const ControledSameLabelInNode = () => {
+    const [value, setValue] = useState();
+    return <Select style={{ width: 180 }} 
+        value={value}
+        data-cy="singleControl"
+        onChange={(value) => {
+            setValue(value)
+            console.log('value', value)
+        }}>
+        <Select.OptGroup label="Asia">
+            <Select.Option value="a-1" label={<div>China</div>} className='a-1' data-cy='a-1'></Select.Option>
+            <Select.Option value="a-2" label={<div>China</div>} className='a-2' data-cy='a-2'></Select.Option>
+            <Select.Option value="a-3" label={<div>Korea</div>} className='a-3'></Select.Option>
+        </Select.OptGroup>
+        <Select.OptGroup label="Europe">
+            <Select.Option value="b-1" label={<div>Germany</div>}></Select.Option>
+            <Select.Option value="b-2" label={<div>France</div>}></Select.Option>
+        </Select.OptGroup>
+    </Select>
+}