浏览代码

fix: [Select] Fix the problem that there is still a drop-down box when the option in Select is empty and emptyContent=null (#1340)

YyumeiZhang 2 年之前
父节点
当前提交
f958eba3da

+ 7 - 0
cypress/integration/select.spec.js

@@ -47,6 +47,13 @@ describe('Select', () => {
         cy.get('@consoleLog').should('be.calledWith', 'onBlur');
     });
 
+    it('emptyContent=null', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--empty-content');
+        // when emptyContent = null, The dropdown list will not be displayed
+        // so element(which class has semi-popover-wrapper) show have 0px height;
+        cy.get('.semi-popover-wrapper').eq(0).should('have.css', 'height', '0px');
+    });
+
     // 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();

+ 8 - 0
packages/semi-ui/select/_story/select.stories.jsx

@@ -2994,3 +2994,11 @@ export const RenderSelectedItemCallCount = () => {
 RenderSelectedItemCallCount.story = {
   name: 'RenderSelectedItemCallCount',
 };
+
+
+export const emptyContent = () => {
+  const list = null;
+  return (
+    <Select placeholder='请选择业务线' emptyContent={null} style={{ width: 180 }} optionList={list} defaultOpen={true}/>
+  )
+}

+ 6 - 1
packages/semi-ui/select/index.tsx

@@ -862,6 +862,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             loading,
             virtualize,
             multiple,
+            emptyContent
         } = this.props;
 
         // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
@@ -884,7 +885,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div 
                 id={`${prefixcls}-${this.selectOptionListID}`} 
-                className={cls(`${prefixcls}-option-list-wrapper`, dropdownClassName)} 
+                className={cls({
+                    // When emptyContent is null and the option is empty, there is no need for the drop-down option for the user,
+                    // so there is no need to set padding through this className
+                    [`${prefixcls}-option-list-wrapper`]: !(isEmpty && emptyContent === null),
+                }, dropdownClassName)} 
                 style={style}
                 ref={this.setOptionContainerEl} 
                 onKeyDown={e => this.foundation.handleContainerKeyDown(e)}