[EuiColorPicker] onBlur and data-test-subj (#4822)

* onBlur; data-test-subj * clean up * CL * append dts * comment
elastic · May 27, 2021 · 0b6b58f · 0b6b58f
1 parent c7e8cc8
commit 0b6b58f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ No public interface changes since `34.1.0`.
 - Added `flex-shrink: 0` to `EuiTabs`, `EuiSpacer`, and `EuiImage` to fix possible shrunken heights ([#4793](https://github.com/elastic/eui/pull/4793))
 - Fixed duplicate `main` aria roles in `EuiPageTemplate` and most common `EuiPage` patterns ([#4793](https://github.com/elastic/eui/pull/4793))
 - Fixed text color of `EuiBottomBar` ([#4793](https://github.com/elastic/eui/pull/4793))
+- Fixed `onBlur` and `data-test-subj` prop propagation in `EuiColorPicker` ([#4822](https://github.com/elastic/eui/pull/4822))
 
 ## [`34.0.0`](https://github.com/elastic/eui/tree/v34.0.0)
 

diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`renders EuiColorPicker 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFEEDD"
               />
@@ -91,7 +91,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFEEDD"
               />
@@ -166,7 +166,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFFFFF"
               />
@@ -229,7 +229,7 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 placeholder="Auto"
                 type="text"
                 value=""
@@ -293,7 +293,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 placeholder="Transparent"
                 type="text"
                 value=""
@@ -357,7 +357,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 placeholder="Transparent"
                 type="text"
                 value=""
@@ -428,7 +428,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiColorPicker__input--inGroup euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFEEDD"
               />
@@ -498,7 +498,7 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFEEDD"
               />
@@ -563,7 +563,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFEEDD"
               />
@@ -628,7 +628,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 disabled=""
                 type="text"
                 value="#FFEEDD"
@@ -694,7 +694,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--fullWidth"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 type="text"
                 value="#FFEEDD"
               />
@@ -942,7 +942,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
                 aria-label="Press the down key to open a popover containing color options"
                 autocomplete="off"
                 class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-                data-test-subj="colorPickerAnchor"
+                data-test-subj="euiColorPickerAnchor test subject string"
                 readonly=""
                 type="text"
                 value="#FFEEDD"

diff --git a/src/components/color_picker/color_picker.test.tsx b/src/components/color_picker/color_picker.test.tsx
@@ -169,7 +169,7 @@ test('popover color selector is not shown by default', () => {
     <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
   );
 
-  const colorSelector = findTestSubject(colorPicker, 'colorPickerPopover');
+  const colorSelector = findTestSubject(colorPicker, 'euiColorPickerPopover');
   expect(colorSelector.length).toBe(0);
 });
 
@@ -184,9 +184,9 @@ test('popover color selector is shown when the input is clicked', () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   expect(onFocusHandler).toBeCalled();
-  const colorSelector = findTestSubject(colorPicker, 'colorPickerPopover');
+  const colorSelector = findTestSubject(colorPicker, 'euiColorPickerPopover');
   expect(colorSelector.length).toBe(1);
 });
 
@@ -201,9 +201,9 @@ test('popover color selector is hidden when the ESC key pressed', async () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   await sleep();
-  findTestSubject(colorPicker, 'colorPickerPopover').simulate('keydown', {
+  findTestSubject(colorPicker, 'euiColorPickerPopover').simulate('keydown', {
     key: keys.ESCAPE,
   });
   // Portal removal not working with Jest. The blur handler is called just before the portal would be removed.
@@ -221,12 +221,12 @@ test('popover color selector is hidden and input regains focus when the ENTER ke
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   findTestSubject(colorPicker, 'euiSaturation').simulate('keydown', {
     key: keys.ENTER,
   });
   expect(
-    findTestSubject(colorPicker, 'colorPickerAnchor').getDOMNode()
+    findTestSubject(colorPicker, 'euiColorPickerAnchor').getDOMNode()
   ).toEqual(document.activeElement);
   // Portal removal not working with Jest. The blur handler is called just before the portal would be removed.
   expect(onBlurHandler).toBeCalled();
@@ -237,7 +237,7 @@ test('Setting a new color calls onChange', () => {
     <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   const event = { target: { value: '#000000' } };
   const inputs = colorPicker.find('input[type="text"]');
   expect(inputs.length).toBe(1);
@@ -255,7 +255,7 @@ test('Clicking a swatch calls onChange', () => {
     <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   const swatches = colorPicker.find('button.euiColorPicker__swatchSelect');
   expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
   swatches.first().simulate('click');
@@ -277,9 +277,9 @@ test('Setting a new alpha value calls onChange', () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   // Slider
-  const alpha = findTestSubject(colorPicker, 'colorPickerAlpha');
+  const alpha = findTestSubject(colorPicker, 'euiColorPickerAlpha');
   const event1 = { target: { value: '50' } };
   const range = alpha.first(); // input[type=range]
   range.simulate('change', event1);
@@ -325,7 +325,7 @@ test('default mode does renders child components', () => {
     <EuiColorPicker onChange={onChange} color="#ffeedd" {...requiredProps} />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   const saturation = findTestSubject(colorPicker, 'euiSaturation');
   expect(saturation.length).toBe(1);
   const hue = colorPicker.find('EuiHue');
@@ -344,7 +344,7 @@ test('swatch mode does not render EuiSaturation or EuiHue', () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   const saturation = colorPicker.find('EuiSaturation');
   expect(saturation.length).toBe(0);
   const hue = colorPicker.find('EuiHue');
@@ -363,7 +363,7 @@ test('picker mode does not render swatches', () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
   const saturation = findTestSubject(colorPicker, 'euiSaturation');
   expect(saturation.length).toBe(1);
   const hue = colorPicker.find('EuiHue');
@@ -382,9 +382,12 @@ test('secondaryInputDisplay `top` has a popover panel input', () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
-  const inputTop = findTestSubject(colorPicker, 'topColorPickerInput');
-  const inputBottom = findTestSubject(colorPicker, 'bottomColorPickerInput');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
+  const inputTop = findTestSubject(colorPicker, 'euiColorPickerInput_top');
+  const inputBottom = findTestSubject(
+    colorPicker,
+    'euiColorPickerInput_bottom'
+  );
   expect(inputTop.length).toBe(1);
   expect(inputBottom.length).toBe(0);
 });
@@ -399,9 +402,12 @@ test('secondaryInputDisplay `bottom` has a popover panel input', () => {
     />
   );
 
-  findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
-  const inputTop = findTestSubject(colorPicker, 'topColorPickerInput');
-  const inputBottom = findTestSubject(colorPicker, 'bottomColorPickerInput');
+  findTestSubject(colorPicker, 'euiColorPickerAnchor').simulate('click');
+  const inputTop = findTestSubject(colorPicker, 'euiColorPickerInput_top');
+  const inputBottom = findTestSubject(
+    colorPicker,
+    'euiColorPickerInput_bottom'
+  );
   expect(inputTop.length).toBe(0);
   expect(inputBottom.length).toBe(1);
 });
diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
@@ -217,6 +217,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   secondaryInputDisplay = 'none',
   isClearable = false,
   placeholder,
+  'data-test-subj': dataTestSubj,
 }) => {
   const preferredFormat = useMemo(() => {
     if (format) return format;
@@ -257,6 +258,8 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   const satruationRef = useRef<HTMLDivElement>(null);
   const swatchRef = useRef<HTMLButtonElement>(null);
 
+  const testSubjAnchor = classNames('euiColorPickerAnchor', dataTestSubj);
+
   const updateColorAsHsv = ([h, s, v]: ColorSpaces['hsv']) => {
     setColorAsHsv(getHsv([h, s, v], usableHsv[0]));
   };
@@ -269,8 +272,6 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     'euiColorPicker__popoverPanel--customButton': button,
   });
   const swatchClass = 'euiColorPicker__swatchSelect';
-  const testSubjAnchor = 'colorPickerAnchor';
-  const testSubjPopover = 'colorPickerPopover';
   const inputClasses = classNames('euiColorPicker__input', {
     'euiColorPicker__input--inGroup': prepend || append,
   });
@@ -283,6 +284,14 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     onChange(text, output);
   };
 
+  const handleOnBlur = () => {
+    // `onBlur` also gets called when the popover is closing
+    // so prevent a second `onBlur` if the popover is open
+    if (!isColorSelectorShown && onBlur) {
+      onBlur();
+    }
+  };
+
   const closeColorSelector = (shouldDelay = false) => {
     if (onBlur) {
       onBlur();
@@ -471,7 +480,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
               readOnly={readOnly}
               aria-label={colorLabel}
               autoComplete="off"
-              data-test-subj={`${secondaryInputDisplay}ColorPickerInput`}
+              data-test-subj={`euiColorPickerInput_${secondaryInputDisplay}`}
             />
           </EuiFormControlLayout>
         </EuiFormRow>
@@ -546,7 +555,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
             {(alphaLabel: string) => (
               <EuiRange
                 className="euiColorPicker__alphaRange"
-                data-test-subj="colorPickerAlpha"
+                data-test-subj="euiColorPickerAlpha"
                 compressed={true}
                 showInput={true}
                 max={100}
@@ -615,6 +624,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
                 className={inputClasses}
                 onClick={handleInputActivity}
                 onKeyDown={handleInputActivity}
+                onBlur={handleOnBlur}
                 value={color ? color.toUpperCase() : HEX_FALLBACK}
                 placeholder={!color ? placeholder || transparent : undefined}
                 id={id}
@@ -656,7 +666,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
       attachToAnchor={button ? false : true}
       anchorPosition="downLeft"
       panelPaddingSize="s">
-      <div className={classes} data-test-subj={testSubjPopover}>
+      <div className={classes} data-test-subj="euiColorPickerPopover">
         <EuiFocusTrap clickOutsideDisables={true}>
           <EuiScreenReaderOnly>
             <p aria-live="polite">