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.
appfolio · Jan 24, 2024 · 1efc60b · 1efc60b
1 parent 92f70fc
commit 1efc60b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 13 deletions.
diff --git a/src/components/Combobox/Combobox.spec.js b/src/components/Combobox/Combobox.spec.js
@@ -214,6 +214,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('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 +281,7 @@ describe('<Combobox />', () => {
     );
   });
 
-  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(
@@ -274,12 +290,12 @@ describe('<Combobox />', () => {
     );
 
     const input = combobox.getByTestId('react-gears-combobox-input');
-    fireEvent.mouseDown(input);
 
-    assert.equal(
-      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
-      'false'
-    );
+    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');
   });
 
   it('should open/close options with dropdown toggle', () => {
@@ -303,10 +319,19 @@ describe('<Combobox />', () => {
 
     fireEvent.mouseDown(caret);
 
-    assert.equal(
-      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
-      'false'
-    );
+    assert.equal(combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'), 'false');
+  });
+
+  it('should open options with dropdown toggle left-click only', () => {
+    const combobox = render(<Combobox options={OPTIONS} />);
+    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 ', () => {

diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
@@ -279,6 +279,10 @@ function Combobox<T>({
             setFocusedOptionIndex(visibleIndex);
           }}
           onMouseDown={(ev) => {
+            if (ev.button !== 0) {
+              return;
+            }
+
             ev.preventDefault();
             ev.stopPropagation();
             selectOption(option.value);
@@ -311,6 +315,10 @@ function Combobox<T>({
           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<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}
@@ -415,6 +428,10 @@ function Combobox<T>({
               disabled={disabled}
               active={open}
               onMouseDown={(ev: React.MouseEvent<HTMLButtonElement>) => {
+                if (ev.button !== 0) {
+                  return;
+                }
+
                 ev.stopPropagation();
                 setOpen(!open);
               }}