fix: Fixed the problem of incorrect update of select ellipsisTrigger … (#1863)

* fix: Fixed the problem of incorrect update of select ellipsisTrigger under certain boundary conditions

* chore: remove useless only in cyoress

* test: remove test

cypress/e2e/select.spec.js

@@ -62,6 +62,34 @@ describe('Select', () => {
         cy.wait(500);
         cy.get('.semi-select-option').should('have.text', 'Design');
     });
+
+    // it('ellipsisTrigger', () => {
+    //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--fix-1560');
+
+    //     // add option
+    //     cy.get('.semi-select-arrow').eq(0).click();
+    //     cy.get('.semi-select-option').contains('剪映').click();
+    //     cy.get('.semi-tag-grey-light').eq(0).contains('+2');
+
+    //     // reduce option
+    //     cy.get('.semi-select-arrow').eq(0).click();
+    //     cy.get('.semi-select-option').contains('抖音').click();
+    //     cy.get('.semi-tag-large').eq(2).contains('剪映');
+
+    //     cy.get('body').click('right');
+
+    //     // reduce option
+    //     cy.get('.semi-select-arrow').eq(1).click();
+    //     cy.get('.semi-select-option').contains('西瓜视频').click();
+    //     cy.get('.semi-tag-grey-light').eq(0).contains('+1');
+
+    //     // add option
+    //     cy.get('.semi-select-arrow').eq(1).click();
+    //     cy.get('.semi-select-option').contains('西瓜视频').click();
+    //     cy.get('.semi-tag-grey-light').eq(0).contains('+2');
+        
+    // });
+
     // it('should trigger onSearch when click x icon', () => {
     //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-filter-single');
     //     cy.get('.semi-select').eq(0).click();

packages/semi-ui/select/_story/select.stories.jsx

@@ -3289,6 +3289,44 @@ export const Fix1584 = () => {
 }
 
 
+export const Fix1560 = () => {
+  return (
+    <div>
+      <h4>边界 case 测试</h4>
+      <h4>maxTagCount = 3，截断最后一个 tag, 加减项正常</h4>
+      <Select
+        multiple
+        maxTagCount={3}
+        ellipsisTrigger
+        showRestTagsPopover={true}
+        restTagsPopoverProps={{ position: 'top' }}
+        style={{ width: '255px' }}
+        defaultValue={['abc', 'ulikecam', "xigua"]}
+      >
+        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="ulikecam">轻颜相机</Select.Option>
+        <Select.Option value="jianying">剪映</Select.Option>
+        <Select.Option value="xigua">西瓜视频</Select.Option>
+      </Select>
+      <br /><br />
+      <h4>maxTagCount = 3，最大宽度只展示 2 个 Tag，加减项正常</h4>
+      <Select
+        multiple
+        maxTagCount={2}
+        ellipsisTrigger
+        showRestTagsPopover={true}
+        restTagsPopoverProps={{ position: 'top' }}
+        style={{ width: '240px' }}
+        defaultValue={['xigua', 'ulikecam', 'jianying', 'abc']}
+      >
+        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="ulikecam">轻颜相机</Select.Option>
+        <Select.Option value="jianying">剪映</Select.Option>
+        <Select.Option value="xigua">西瓜视频</Select.Option>
+      </Select>
+    </div>
+  );
+}
 
 class VirtualizeAllowCreate extends React.Component {
     constructor(props) {
@@ -3328,4 +3366,4 @@ class VirtualizeAllowCreate extends React.Component {
 }
 
 // virtualize allowCreate + renderCreateItem, optionList render not as expected
-export const Fix1856 = () => (<VirtualizeAllowCreate />); 
+export const Fix1856 = () => (<VirtualizeAllowCreate />); 

packages/semi-ui/select/index.tsx

@@ -917,7 +917,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 ref={this.setOptionContainerEl}
                 onKeyDown={e => this.foundation.handleContainerKeyDown(e)}
             >
-                {outerTopSlot ? <div className={`${prefixcls}-option-list-outer-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerTopSlot}</div> : null }
+                {outerTopSlot ? <div className={`${prefixcls}-option-list-outer-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerTopSlot}</div> : null}
                 <div
                     style={{ maxHeight: `${maxHeight}px` }}
                     className={optionListCls}
@@ -925,11 +925,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     aria-multiselectable={multiple}
                     onScroll={e => this.foundation.handleListScroll(e)}
                 >
-                    {innerTopSlot ? <div className={`${prefixcls}-option-list-inner-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerTopSlot}</div> : null }
+                    {innerTopSlot ? <div className={`${prefixcls}-option-list-inner-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerTopSlot}</div> : null}
                     {loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent}
-                    {innerBottomSlot ? <div className={`${prefixcls}-option-list-inner-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerBottomSlot}</div> : null }
+                    {innerBottomSlot ? <div className={`${prefixcls}-option-list-inner-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerBottomSlot}</div> : null}
                 </div>
-                {outerBottomSlot ? <div className={`${prefixcls}-option-list-outer-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerBottomSlot}</div> : null }
+                {outerBottomSlot ? <div className={`${prefixcls}-option-list-outer-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerBottomSlot}</div> : null}
             </div>
         );
     }
@@ -1092,9 +1092,8 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     handleOverflow(items: [React.ReactNode, any][]) {
         const { overflowItemCount, selections } = this.state;
         const { maxTagCount } = this.props;
-        const maxVisibleCount = selections.size - maxTagCount;
-        const newOverFlowItemCount = maxVisibleCount > 0 ? maxVisibleCount + items.length - 1 : items.length - 1;
-        if (items.length > 1 && overflowItemCount !== newOverFlowItemCount) {
+        const newOverFlowItemCount = selections.size - maxTagCount > 0 ? selections.size - maxTagCount + items.length - 1 : items.length - 1;
+        if (overflowItemCount !== newOverFlowItemCount) {
             this.foundation.updateOverflowItemCount(selections.size, newOverFlowItemCount);
         }
     }
@@ -1107,6 +1106,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             <div className={`${prefixcls}-content-wrapper-collapse`}>
                 <OverflowList
                     items={normalTags}
+                    key={String(selections.length)}
                     overflowRenderer={overflowItems => this.renderOverflow(overflowItems as [React.ReactNode, any][], length - 1)}
                     onOverflow={overflowItems => this.handleOverflow(overflowItems as [React.ReactNode, any][])}
                     visibleItemRenderer={(item, index) => this.renderTag(item as [React.ReactNode, any], index)}