Skip to content

Commit

Permalink
fix: the new version of pr #1977
Browse files Browse the repository at this point in the history
  • Loading branch information
@YannLynn
YannLynn committed Dec 26, 2023
1 parent 2559649 commit ff27463
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 8 deletions.
75 changes: 70 additions & 5 deletions cypress/e2e/select.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,85 @@ describe('Select', () => {
cy.get('.semi-select-option').eq(3).should('have.text', 'Xigua');
});

it('blur', () => {
cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-on-blur-on-focus', {
it('blur trigger by mouse click after select option', () => {
cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--all-case-of-blur', {
onBeforeLoad(win) {
cy.stub(win.console, 'log').as('consoleLog');
},
});

cy.viewport(1000, 1000);

cy.get('.semi-select-selection').eq(0).click();
cy.get('.semi-select-option').eq(0).click();
cy.get('body').click('right');
cy.get('@consoleLog').should('be.calledWith', 'onBlur');
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'single autoFocus onBlur');
cy.get('@consoleLog').should('be.calledWith', 'single default onBlur');

cy.get('.semi-select-selection').eq(1).click();
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'single filter onBlur');

cy.get('.semi-select-selection').eq(3).click();
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'single clickToHide onBlur');

cy.get('.semi-select-selection').eq(4).click();
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'multiple default onBlur');

cy.get('.semi-select-selection').eq(5).click();
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'multiple filter onBlur');

cy.get('.semi-select-selection').eq(6).click();
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'multiple clickToHide onBlur');

});

it('blur trigger by mouse click without select option', () => {
cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--all-case-of-blur', {
onBeforeLoad(win) {
cy.stub(win.console, 'log').as('consoleLog');
},
});

cy.viewport(1000, 1000);

cy.get('.semi-select-selection').eq(0).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'single autoFocus onBlur');
cy.get('@consoleLog').should('be.calledWith', 'single default onBlur');

cy.get('.semi-select-selection').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'single filter onBlur');

cy.get('.semi-select-selection').eq(3).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'single clickToHide onBlur');

cy.get('.semi-select-selection').eq(4).click();
cy.get('.semi-select-option').eq(1).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'multiple default onBlur');

cy.get('.semi-select-selection').eq(5).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'multiple filter onBlur');

cy.get('.semi-select-selection').eq(6).click();
cy.root().click('right');
cy.get('@consoleLog').should('be.calledWith', 'multiple clickToHide onBlur');

});

// it('ellipsisTrigger', () => {
// cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--fix-1560');

Expand Down
7 changes: 5 additions & 2 deletions packages/semi-foundation/select/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
const newOptions = this._filterOption(options, sugInput).filter(item => !item._inputCreateOnly);
this._adapter.updateOptions(newOptions);
this.toggle2SearchInput(true);
} else {
// whether it is a filter or not, isFocus is guaranteed to be true when open
this._adapter.updateFocusState(true);
}
this._adapter.openMenu();
this._setDropdownWidth();
Expand All @@ -363,7 +366,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
this.close(e);
this._notifyBlur(e);
this._adapter.updateFocusState(false);
this._adapter.unregisterClickOutsideHandler();
});
}

Expand All @@ -385,6 +387,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
// this.unBindKeyBoardEvent();
// this._notifyBlur(e);
// this._adapter.updateFocusState(false);
this._adapter.unregisterClickOutsideHandler();

const isFilterable = this._isFilterable();
if (isFilterable) {
Expand Down Expand Up @@ -1053,13 +1056,13 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
}

handleTriggerBlur(e: FocusEvent) {
this._adapter.updateFocusState(false);
const { filter, autoFocus } = this.getProps();
const { isOpen, isFocus } = this.getStates();
// Under normal circumstances, blur will be accompanied by clickOutsideHandler, so the notify of blur can be called uniformly in clickOutsideHandler
// But when autoFocus or the panel is close, because clickOutsideHandler is not register or unregister, you need to listen for the trigger's blur and trigger the notify callback
if (isFocus && !isOpen) {
this._notifyBlur(e);
this._adapter.updateFocusState(false);
}
}

Expand Down
83 changes: 82 additions & 1 deletion packages/semi-ui/select/_story/select.stories.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect } from 'react';

import './select.scss';
import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag, Switch } from '../../index';
import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag, Switch, Divider } from '../../index';
import CustomTrigger from './CustomTrigger';
import classNames from 'classnames';
const Option = Select.Option;
Expand Down Expand Up @@ -3413,4 +3413,85 @@ export const TestOptionKey = () => {
]}>
</Select>
</>
}

export const AllCaseOfBlur = () => {
return (
<div>
<h3>单选</h3>
<Divider margin='12px' />
<h5>默认配置</h5>
<Select defaultValue="abc" style={{ width: 120 }} onBlur={()=>{console.log('single default onBlur')}} >
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<h5>filter</h5>
<Select defaultValue="abc" style={{ width: 120 }} filter onBlur={()=>{console.log('single filter onBlur')}}>
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<h5>autoFocus</h5>
<Select defaultValue="abc" style={{ width: 120 }} autoFocus onBlur={()=>{console.log('single autoFocus onBlur')}}>
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<h5>clickToHide</h5>
<Select defaultValue="abc" style={{ width: 120 }} clickToHide onBlur={()=>{console.log('single clickToHide onBlur')}}>
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<h3>多选</h3>
<Divider margin='12px' />
<h5>默认配置</h5>
<Select defaultValue="abc" style={{ width: 220 }} multiple onBlur={()=>{console.log('multiple default onBlur')}}>
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<h5>filter</h5>
<Select defaultValue="abc" style={{ width: 220 }} multiple filter onBlur={()=>{console.log('multiple filter onBlur')}}>
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<h5>clickToHide</h5>
<Select defaultValue="abc" style={{ width: 120 }} multiple clickToHide onBlur={()=>{console.log('multiple clickToHide onBlur')}}>
<Select.Option value="abc">抖音</Select.Option>
<Select.Option value="ulikecam">轻颜相机</Select.Option>
<Select.Option value="jianying" disabled>
剪映
</Select.Option>
<Select.Option value="xigua">西瓜视频</Select.Option>
</Select>
<br />
<br />
</div>
)
}

0 comments on commit ff27463

Please sign in to comment.