Browse Source

fix[Select]: fix select losing focus issue (#7829)

main
Carl Chen 2 weeks ago committed by GitHub
parent
commit
22dad3ba6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 46
      components/select/__tests__/index.test.js
  2. 8
      components/vc-select/BaseSelect.tsx

46
components/select/__tests__/index.test.js

@ -159,6 +159,52 @@ describe('Select', () => {
}, 500);
});
it('The select trigger should be blur when the panel is closed.', async () => {
const wrapper = mount(
{
render() {
return (
<Select
dropdownRender={() => {
return <input id="dropdownRenderInput" />;
}}
/>
);
},
},
{
sync: false,
attachTo: 'body',
},
);
await asyncExpect(async () => {
await wrapper.find('.ant-select-selector').trigger('mousedown');
await wrapper.find('.ant-select-selection-search-input').trigger('focus');
});
await asyncExpect(async () => {
const el = wrapper.find('.ant-select');
expect(el.classes()).toContain('ant-select-focused');
$$('#dropdownRenderInput')[0].focus();
expect(el.classes()).toContain('ant-select-focused');
document.body.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true,
cancelable: true,
view: window,
}),
);
}, 100);
await asyncExpect(async () => {
const el = wrapper.find('.ant-select');
expect(el.classes()).not.toContain('ant-select-focused');
}, 200);
});
describe('Select Custom Icons', () => {
it('should support customized icons', () => {
const wrapper = mount({

8
components/vc-select/BaseSelect.tsx

@ -343,6 +343,14 @@ export default defineComponent({
if (mergedOpen.value !== nextOpen && !props.disabled) {
setInnerOpen(nextOpen);
props.onDropdownVisibleChange && props.onDropdownVisibleChange(nextOpen);
if (!nextOpen && popupFocused.value) {
popupFocused.value = false;
setMockFocused(false, () => {
focusRef.value = false;
blurRef.value = false;
});
}
}
};

Loading…
Cancel
Save