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

src/lib/viewers/controls/color-picker/ColorPickerControl.tsx

@@ -40,13 +40,24 @@ 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
                 className={classNames('bp-ColorPickerControl-toggle', { 'bp-is-active': isColorPickerToggled })}
                 data-testid="bp-ColorPickerControl-toggle"
                 onBlur={handleBlur}
                 onClick={handleClick}
+                onMouseDown={handleMouseDown}
                 type="button"
                 {...rest}
             >

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', () => {