github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: select focus not work

pull/2682/head
tanjinzhou 2020-08-04 14:39:23 +08:00
parent a15dd7bea0
commit 6a608c9204
6 changed files with 60 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit f6f5907aa1495eca8086137888e935b681ce2fdb
Subproject commit be6191e05ba4d7fc25413373659aaed84eb4c6d7

13
components/select/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,9 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Select Select Custom Icons should support customized icons 1`] = `
<div tabindex="0" class="ant-select ant-select-enabled">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
<!---->
<div class="ant-select ant-select-enabled" tabindex="0">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<!---->
<!---->
</div>
<!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
</div>
</div>
`;
exports[`Select should not have notFoundContent when mode is combobox and notFoundContent is set 1`] = `"not at all<!---->"`;

121
components/select/__tests__/index.test.js
View File

@ -4,10 +4,29 @@ import Select from '..';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
function $$(className) {
return document.body.querySelectorAll(className);
}
function getStyle(el, prop) {
const style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle;
// If a css property's value is `auto`, it will return an empty string.
return prop ? style[prop] : style;
}
describe('Select', () => {
beforeEach(() => {
document.body.innerHTML = '';
});
focusTest(Select);
mountTest(Select);
mountTest({
render() {
return (
<div>
<Select />
</div>
);
},
});
it('should have default notFoundContent', async () => {
const wrapper = mount(Select, {
@ -15,27 +34,17 @@ describe('Select', () => {
mode: 'multiple',
},
sync: false,
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.find('.ant-select').trigger('click');
});
const dropdownWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(dropdownWrapper.findAll({ name: 'MenuItem' }).length).toBe(1);
expect(
dropdownWrapper
.findAll({ name: 'MenuItem' })
.at(0)
.text(),
).toBe('No Data');
expect($$('.ant-select-dropdown-menu-item').length).toBe(1);
expect($$('.ant-select-dropdown-menu-item .ant-empty-description')[0].innerHTML).toBe(
'No Data',
);
});
});
@ -46,20 +55,14 @@ describe('Select', () => {
notFoundContent: null,
},
sync: false,
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.find('.ant-select').trigger('click');
});
const dropdownWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(dropdownWrapper.findAll({ name: 'MenuItem' }).length).toBe(0);
expect($$('.ant-select-dropdown-menu-item').length).toBe(0);
});
});
@ -69,21 +72,14 @@ describe('Select', () => {
mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
},
sync: false,
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.find('.ant-select').trigger('click');
});
const dropdownWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(dropdownWrapper.findAll('MenuItem').length).toBe(0);
expect($$('.ant-select-dropdown-menu-item').length).toBe(0);
});
});
@ -99,22 +95,9 @@ describe('Select', () => {
wrapper.find('.ant-select').trigger('click');
});
const dropdownWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(dropdownWrapper.findAll({ name: 'MenuItem' }).length).toBe(1);
expect(
dropdownWrapper
.findAll({ name: 'MenuItem' })
.at(0)
.text(),
).toBe('not at all');
expect($$('.ant-select-dropdown-menu-item').length).toBe(1);
expect($$('.ant-select-dropdown-menu-item')[0].innerHTML).toMatchSnapshot();
});
});
@ -131,52 +114,32 @@ describe('Select', () => {
render() {
return (
<Select open={this.open} onDropdownVisibleChange={onDropdownVisibleChange}>
<Option value="1">1</Option>
<Select.Option value="1">1</Select.Option>
</Select>
);
},
},
{ sync: false },
);
let triggerComponent = null;
mount(
{
render() {
triggerComponent = wrapper.find({ name: 'Trigger' }).vm.getComponent();
return triggerComponent;
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
// console.log(triggerComponent.componentInstance.visible)
expect(triggerComponent.componentInstance.visible).toBe(true);
expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('block');
});
await asyncExpect(() => {
wrapper.find('.ant-select').trigger('click');
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
});
await asyncExpect(() => {
expect(triggerComponent.componentInstance.visible).toBe(true);
expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('block');
wrapper.setProps({ open: false });
});
await asyncExpect(() => {
mount(
{
render() {
triggerComponent = wrapper.find({ name: 'Trigger' }).vm.getComponent();
return triggerComponent;
},
},
{ sync: false },
);
});
await asyncExpect(() => {
expect(triggerComponent.componentInstance.visible).toBe(false);
expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('none');
wrapper.find('.ant-select').trigger('click');
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
expect(triggerComponent.componentInstance.visible).toBe(false);
});
expect(getStyle($$('.ant-select-dropdown')[0], 'display')).toBe('none');
}, 500);
});
describe('Select Custom Icons', () => {
@ -189,7 +152,7 @@ describe('Select', () => {
clearIcon={<CloseOutlined />}
menuItemSelectedIcon={<CloseOutlined />}
>
<Option value="1">1</Option>
<Select.Option value="1">1</Select.Option>
</Select>
);
},

14
components/select/index.jsx
View File

@ -4,13 +4,7 @@ import omit from 'omit.js';
import PropTypes from '../_util/vue-types';
import { Select as VcSelect, Option, OptGroup } from '../vc-select';
import { ConfigConsumerProps } from '../config-provider';
import {
getComponent,
getOptionProps,
filterEmpty,
isValidElement,
getSlot,
} from '../_util/props-util';
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@ -244,14 +238,14 @@ const Select = {
placeholder: getComponent(this, 'placeholder'),
children: options
? options.map(option => {
const { key, label = option.title, on, class: cls, style, ...restOption } = option;
const { key, label = option.title, class: cls, style, ...restOption } = option;
return (
<Option key={key} {...{ on, class: cls, style, ...restOption }}>
<Option key={key} {...{ class: cls, style, ...restOption }}>
{label}
</Option>
);
})
: filterEmpty(getSlot(this)),
: getSlot(this),
__propsSymbol__: Symbol(),
dropdownRender: getComponent(this, 'dropdownRender', {}, false),
getPopupContainer: getPopupContainer || getContextPopupContainer,

13
components/vc-select/Select.jsx
View File

@ -1486,17 +1486,8 @@ const Select = {
}
}
},
selectionRefFocus() {
if (this.getInputDOMNode() && this.getInputDOMNode()) {
this.getInputDOMNode().focus();
}
// if (this._focused || this.disabled || isMultipleOrTagsOrCombobox(this.$props)) {
// e.preventDefault();
// return;
// }
// this._focused = true;
// this.updateFocusClassName();
// this.__emit('focus');
selectionRefFocus(e) {
this.inputFocus(e);
},
selectionRefBlur(e) {
if (isMultipleOrTagsOrCombobox(this.$props)) {

2
examples/App.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script>
import demo from '../antdv-demo/docs/tag/demo/basic';
import demo from '../antdv-demo/docs/select/demo/index';
export default {
components: {