Skip to content

Commit

Permalink
fix: combobox onMouseDown event default behavior (#1042)
Browse files Browse the repository at this point in the history
  • Loading branch information
T-Roc committed May 7, 2024
1 parent 74969b0 commit 9c7062c
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 3 deletions.
6 changes: 4 additions & 2 deletions src/Selector/index.tsx
Expand Up @@ -109,6 +109,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
mode,
showSearch,
tokenWithEnter,
disabled,

autoClearSearchValue,

Expand Down Expand Up @@ -228,9 +229,10 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
const onMouseDown: React.MouseEventHandler<HTMLElement> = (event) => {
const inputMouseDown = getInputMouseDown();

// when mode is combobox, don't prevent default behavior
// when mode is combobox and it is disabled, don't prevent default behavior
// https://github.com/ant-design/ant-design/issues/37320
if (event.target !== inputRef.current && !inputMouseDown && mode !== 'combobox') {
// https://github.com/ant-design/ant-design/issues/48281
if (event.target !== inputRef.current && !inputMouseDown && !(mode === 'combobox' && disabled)) {
event.preventDefault();
}

Expand Down
40 changes: 39 additions & 1 deletion tests/Combobox.test.tsx
@@ -1,7 +1,7 @@
/* eslint-disable max-classes-per-file */

import '@testing-library/jest-dom';
import { fireEvent, render } from '@testing-library/react';
import { createEvent, fireEvent, render } from '@testing-library/react';
import KeyCode from 'rc-util/lib/KeyCode';
import { resetWarned } from 'rc-util/lib/warning';
import React, { act } from 'react';
Expand Down Expand Up @@ -604,4 +604,42 @@ describe('Select.Combobox', () => {
const { container } = render(<Select mode="combobox" value={0} />);
expect(container.querySelector('input')!.value).toBe('0');
});

// https://github.com/ant-design/ant-design/issues/48281
describe('combobox mode onMouseDown event default behavior', () => {
it('should prevent default behavior when mode is combobox', () => {
const preventDefault = jest.fn();
const { container } = render(
<Select mode="combobox" value="1">
<Option value="1">1</Option>
<Option value="2">2</Option>
</Select>,
);

const selectorEle = container.querySelector('.rc-select-selector');

const mouseDownEvent = createEvent.mouseDown(selectorEle);
mouseDownEvent.preventDefault = preventDefault;
fireEvent(selectorEle, mouseDownEvent);
expect(preventDefault).toHaveBeenCalled();
})

it('should not prevent default behavior when mode is combobox and it is disabled', () => {
const preventDefault = jest.fn();
const { container } = render(
<Select mode="combobox" value="1" disabled>
<Option value="1">1</Option>
<Option value="2">2</Option>
</Select>,
);

const selectorEle = container.querySelector('.rc-select-selector');

const mouseDownEvent = createEvent.mouseDown(selectorEle);
mouseDownEvent.preventDefault = preventDefault;
fireEvent(selectorEle, mouseDownEvent);
expect(preventDefault).not.toHaveBeenCalled();
})
});

});

0 comments on commit 9c7062c

Please sign in to comment.