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); }}