fix(preview): fix test and remove useAttention usage

box · Nov 4, 2021 · e507e84 · e507e84
1 parent 5a1ce54
commit e507e84
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables';
 import ColorPickerPalette from './ColorPickerPalette';
-import useAttention from '../hooks/useAttention';
 import './ColorPickerControl.scss';
 
 export type Props = {
@@ -20,29 +19,29 @@ export default function ColorPickerControl({
     const paletteRef = React.useRef<HTMLDivElement>(null);
     const toggleRef = React.useRef<HTMLButtonElement>(null);
     const [isColorPickerToggled, setIsColorPickerToggled] = React.useState(false);
-    const [handlers] = useAttention();
-    const { current: paletteEl } = paletteRef;
-    const { current: toggleEl } = toggleRef;
 
     const handleSelect = (color: string): void => {
         setIsColorPickerToggled(false);
         onColorSelect(color);
     };
 
     const handleBlur = ({ relatedTarget }: React.FocusEvent<HTMLButtonElement>): void => {
+        const { current: paletteEl } = paletteRef;
+        const { current: toggleEl } = toggleRef;
         // IE11 does not have relatedTarget but update activeElement before blur
         const nextTarget = relatedTarget || document.activeElement;
+        const nextEl = nextTarget ? (nextTarget as Node) : null;
+        const isNextInPalette = paletteEl && paletteEl.contains(nextEl);
+        const isNextToggle = toggleEl && toggleEl === nextEl;
 
-        if ((nextTarget && paletteEl && paletteEl.contains(nextTarget as Node)) || toggleEl === (nextTarget as Node)) {
+        if (isNextInPalette || isNextToggle) {
             return;
         }
 
         setIsColorPickerToggled(false);
     };
 
-    const handleClick = (): void => {
-        setIsColorPickerToggled(!isColorPickerToggled);
-    };
+    const handleClick = (): void => setIsColorPickerToggled(!isColorPickerToggled);
 
     const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>): void => {
         if (event.currentTarget.focus) {
@@ -74,7 +73,6 @@ export default function ColorPickerControl({
                 ref={paletteRef}
                 className={classNames('bp-ColorPickerControl-palette', { 'bp-is-open': isColorPickerToggled })}
                 data-testid="bp-ColorPickerControl-palette"
-                {...handlers}
             >
                 <ColorPickerPalette
                     colors={colors}

diff --git a/src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx b/src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx
@@ -7,7 +7,7 @@ export type Props = {
     onSelect: (color: string) => void;
 };
 
-export default function ColorPickerPalette({ colors, onSelect, onBlur }: Props): JSX.Element {
+export default function ColorPickerPalette({ colors, onBlur, onSelect }: Props): JSX.Element {
     return (
         <div className="bp-ColorPickerPalette">
             {colors.map(color => {

diff --git a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
@@ -76,16 +76,29 @@ describe('ColorPickerControl', () => {
             expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
         });
 
-        test('should close the palette when focus is outside palette', () => {
+        test('should close the palette when focus is outside palette and button', () => {
             const wrapper = getWrapper();
             const toggleButton = getToggleButton(wrapper);
-            const divNode = document.createElement('div');
+            const colorPaletteChild = getColorPickerPalette(wrapper).getDOMNode().firstChild;
+            const divEl = document.createElement('div');
 
             toggleButton.simulate('click');
             expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
 
             toggleButton.simulate('blur', {
-                relatedTarget: divNode,
+                relatedTarget: colorPaletteChild,
+            });
+
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
+
+            toggleButton.simulate('blur', {
+                relatedTarget: toggleButton.getDOMNode(),
+            });
+
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
+
+            toggleButton.simulate('blur', {
+                relatedTarget: divEl,
             });
 
             expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(false);