From bd66999c4a7a8a28432a78c314934d63cfaf292a Mon Sep 17 00:00:00 2001
From: Mingze <mxiao@box.com>
Date: Wed, 20 Jan 2021 16:07:25 -0800
Subject: [PATCH] fix(drawing): Fix Safari doesn't focus and blur color picker
 button (#1321)

* fix(drawing): Fix Safari doesn't focus and blur color picker button

* fix(drawing): Address comments
---
 .../controls/color-picker/ColorPickerControl.tsx    | 11 +++++++++++
 .../__tests__/ColorPickerControl-test.tsx           | 13 +++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
index 702c9e4b0..80d791472 100644
--- a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
+++ b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
@@ -40,6 +40,16 @@ export default function ColorPickerControl({
 
     const handleClick = (): void => setIsColorPickerToggled(!isColorPickerToggled);
 
+    const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>): void => {
+        if (event.currentTarget.focus) {
+            // Buttons do not receive focus in Firefox and Safari on MacOS
+            event.currentTarget.focus();
+            // When focus is called within a mousedown handler,
+            // preventDefault must be called to keep the focus from leaving the target
+            event.preventDefault();
+        }
+    };
+
     return (
         <div className="bp-ColorPickerControl">
             <button
@@ -47,6 +57,7 @@ export default function ColorPickerControl({
                 data-testid="bp-ColorPickerControl-toggle"
                 onBlur={handleBlur}
                 onClick={handleClick}
+                onMouseDown={handleMouseDown}
                 type="button"
                 {...rest}
             >
diff --git a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
index e834067e8..813cee76c 100644
--- a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
+++ b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
@@ -75,6 +75,19 @@ describe('ColorPickerControl', () => {
 
             expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
         });
+
+        test('should call focus and stop propagation when mouse down', () => {
+            const mockEvent = {
+                currentTarget: {
+                    focus: jest.fn(),
+                },
+                preventDefault: jest.fn(),
+            };
+            (getToggleButton(getWrapper()).prop('onMouseDown') as Function)(mockEvent);
+
+            expect(mockEvent.currentTarget.focus).toHaveBeenCalled();
+            expect(mockEvent.preventDefault).toHaveBeenCalled();
+        });
     });
 
     describe('handleSelect', () => {