fix: don't capture non-left mouse clicks on combobox

Right-clicking on a combobox input or menu option should
not behave like a left click. this commit skips the
custom mouse down handling if not left-click.

src/components/Combobox/Combobox.spec.js

@@ -191,6 +191,22 @@ describe('<Combobox />', () => {
     sinon.assert.calledWith(mockOnChange, OPTIONS[1].value);
   });
 
+  it('should select an option with left-click only', () => {
+    const mockOnChange = sinon.spy();
+    const combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} />);
+    const input = combobox.getByTestId('combobox-input');
+
+    fireEvent.focus(input);
+    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+
+    const option = combobox.getByText('D-O');
+    fireEvent.mouseDown(option, { button: 2 });
+    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+
+    fireEvent.mouseDown(option);
+    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+  });
+
   it('should deselect option on backspace', () => {
     let value;
     const mockOnChange = (v) => {
@@ -233,14 +249,17 @@ describe('<Combobox />', () => {
     assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
-  it('should open options if input is clicked', async () => {
+  it('should open options if input is left-clicked', async () => {
     const combobox = render(<Combobox options={OPTIONS} value={3} />);
 
     assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
 
     const input = combobox.getByTestId('combobox-input');
-    fireEvent.mouseDown(input);
 
+    fireEvent.mouseDown(input, { button: 2 });
+    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+
+    fireEvent.mouseDown(input);
     assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
@@ -262,6 +281,18 @@ describe('<Combobox />', () => {
     assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
+  it('should open options with dropdown toggle left-click only', () => {
+    const combobox = render(<Combobox options={OPTIONS} />);
+    const caret = combobox.getByTestId('combobox-caret');
+    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+
+    fireEvent.mouseDown(caret, { button: 2 });
+    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+
+    fireEvent.mouseDown(caret);
+    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+  });
+
   describe('default filterOptions ', () => {
     it('should filter by input (case insensitive)', () => {
       const combobox = render(<Combobox options={OPTIONS} />);

src/components/Combobox/Combobox.tsx

@@ -278,6 +278,10 @@ function Combobox<T>({
             setFocusedOptionIndex(visibleIndex);
           }}
           onMouseDown={(ev) => {
+            if (ev.button !== 0) {
+              return;
+            }
+
             ev.preventDefault();
             ev.stopPropagation();
             selectOption(option.value);
@@ -308,6 +312,10 @@ function Combobox<T>({
           data-testid="create-new-option"
           disabled={!isValidNewOption(inputValue)}
           onMouseDown={(ev) => {
+            if (ev.button !== 0) {
+              return;
+            }
+
             ev.preventDefault();
             ev.stopPropagation();
             createOption();
@@ -386,17 +394,22 @@ function Combobox<T>({
                   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<T>).label === inputValue) {
-                    e.preventDefault();
+                    ev.preventDefault();
                   }
                 }
 
                 // @ts-ignore
-                e.target.focus();
+                ev.target.focus();
               }}
               onKeyDown={handleOptionsKeyboardNav}
               onKeyPress={clearSelectedPreview}
@@ -412,6 +425,10 @@ function Combobox<T>({
               disabled={disabled}
               active={open}
               onMouseDown={(ev: React.MouseEvent<HTMLButtonElement>) => {
+                if (ev.button !== 0) {
+                  return;
+                }
+
                 ev.stopPropagation();
                 setOpen(!open);
               }}