diff --git a/src/components/Combobox/Combobox.spec.js b/src/components/Combobox/Combobox.spec.js
index 1a8887d23..7e6ce4c53 100644
--- a/src/components/Combobox/Combobox.spec.js
+++ b/src/components/Combobox/Combobox.spec.js
@@ -214,6 +214,31 @@ describe('', () => {
sinon.assert.calledWith(mockOnChange, OPTIONS[1].value);
});
+ it('should select an option with left-click only', () => {
+ const mockOnChange = sinon.spy();
+ const combobox = render();
+ const input = combobox.getByTestId('react-gears-combobox-input');
+
+ fireEvent.focus(input);
+ assert.strictEqual(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'false'
+ );
+
+ const option = combobox.getByText('D-O');
+ fireEvent.mouseDown(option, { button: 2 });
+ assert.strictEqual(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'false'
+ );
+
+ fireEvent.mouseDown(option);
+ assert.strictEqual(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'true'
+ );
+ });
+
it('should deselect option on backspace', () => {
let value;
const mockOnChange = (v) => {
@@ -265,7 +290,7 @@ describe('', () => {
);
});
- it('should open options if input is clicked', async () => {
+ it('should open options if input is left-clicked', async () => {
const combobox = render();
assert.equal(
@@ -274,8 +299,14 @@ describe('', () => {
);
const input = combobox.getByTestId('react-gears-combobox-input');
- fireEvent.mouseDown(input);
+ fireEvent.mouseDown(input, { button: 2 });
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'true'
+ );
+
+ fireEvent.mouseDown(input);
assert.equal(
combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
'false'
@@ -309,6 +340,27 @@ describe('', () => {
);
});
+ it('should open options with dropdown toggle left-click only', () => {
+ const combobox = render();
+ const caret = combobox.getByTestId('react-gears-combobox-button');
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'true'
+ );
+
+ fireEvent.mouseDown(caret, { button: 2 });
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'true'
+ );
+
+ fireEvent.mouseDown(caret);
+ assert.equal(
+ combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+ 'false'
+ );
+ });
+
describe('default filterOptions ', () => {
it('should filter by input (case insensitive)', () => {
const combobox = render();
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index 6284537a0..eceb05466 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -279,6 +279,10 @@ function Combobox({
setFocusedOptionIndex(visibleIndex);
}}
onMouseDown={(ev) => {
+ if (ev.button !== 0) {
+ return;
+ }
+
ev.preventDefault();
ev.stopPropagation();
selectOption(option.value);
@@ -311,6 +315,10 @@ function Combobox({
data-testid="react-gears-combobox-dropdownitem-create-new-option"
disabled={!isValidNewOption(inputValue)}
onMouseDown={(ev) => {
+ if (ev.button !== 0) {
+ return;
+ }
+
ev.preventDefault();
ev.stopPropagation();
createOption();
@@ -389,17 +397,22 @@ function Combobox({
onChange(undefined);
}
}}
- onMouseDown={(e) => {
+ onMouseDown={(ev) => {
+ if (ev.button !== 0) {
+ ev.preventDefault();
+ return;
+ }
+
if (!multi && selected) {
inputElement!.current!.setSelectionRange(0, 0);
if ((selected as Option).label === inputValue) {
- e.preventDefault();
+ ev.preventDefault();
}
}
// @ts-ignore
- e.target.focus();
+ ev.target.focus();
}}
onKeyDown={handleOptionsKeyboardNav}
onKeyPress={clearSelectedPreview}
@@ -415,6 +428,10 @@ function Combobox({
disabled={disabled}
active={open}
onMouseDown={(ev: React.MouseEvent) => {
+ if (ev.button !== 0) {
+ return;
+ }
+
ev.stopPropagation();
setOpen(!open);
}}