Browse Source

style: fix select placeholder inactive still remain when blur (#2547)

* style: select placeholder inactive style didn't remove after clearIcon click and blur
* fix: select inactive style
* test: remove e2e only
pointhalo 11 months ago
parent
commit
92c65837a6

+ 1 - 1
cypress/e2e/select.spec.js

@@ -217,7 +217,7 @@ describe('Select', () => {
         cy.get('[data-cy=option-8]').should('have.class', 'custom-option-render-focused');
     });
 
-    it.only('Fixed PR-2465', () => {
+    it('Fixed PR-2465', () => {
         cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--fix-2465');
         cy.get('.semi-select').eq(0).click();
         cy.get('button').contains('single close').eq(0).click();

+ 5 - 3
packages/semi-foundation/select/foundation.ts

@@ -1113,10 +1113,12 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     handleInputBlur(e: any) {
         const { filter, autoFocus } = this.getProps();
+        const { showInput } = this.getStates();
         const isMultiple = this._isMultiple();
-        if (autoFocus && filter && !isMultiple ) {
-            // under this condition, when input blur, hide the input
-            this.toggle2SearchInput(false);
+        if (filter && !isMultiple ) {
+            if (showInput || autoFocus) {
+                this.toggle2SearchInput(false);
+            }
         }
     }
 

+ 3 - 4
packages/semi-ui/select/_story/select.stories.jsx

@@ -790,6 +790,7 @@ export const SelectFilterSingle = () => (
       }}
       showClear
       autoFocus
+      placeholder='singe filter select'
       onSearch={(val) => console.log(`onSearch:${val}`)}
       onFocus={() => console.log('onFocus')}
       onBlur={() => console.log('onBlur')}
@@ -2217,6 +2218,7 @@ class OptionGroupDemo extends React.Component {
             width: 180,
           }}
           filter
+          showClear
         >
           {groups.map((group, index) => this.renderGroup(group, index))}
         </Select>
@@ -2227,6 +2229,7 @@ class OptionGroupDemo extends React.Component {
               let sug = sugInput.toUpperCase();
               return label.includes(sug);
           }}
+          showClear
           id='without-key'
           style={{ width: "180px" }}
           placeholder="without key"
@@ -2256,10 +2259,6 @@ class OptionGroupDemo extends React.Component {
 
 export const SelectOptionGroup = () => <OptionGroupDemo />;
 
-SelectOptionGroup.story = {
-  name: 'Select OptionGroup',
-};
-
 const BlurDemo = () => {
   const onBlur = (value, e) => {
     console.log(value);