[ML] Hide anomaly entity filter button tooltips when clicked (#117493)

* [ML] Hide anomaly entity filter button tooltips when clicked * [ML] Move logic into blurButtonOnClick helper function
elastic · Nov 4, 2021 · 46e91f3 · 46e91f3
1 parent 3ec0dd7
commit 46e91f3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/influencers_cell.js b/x-pack/plugins/ml/public/application/components/anomalies_table/influencers_cell.js
@@ -12,6 +12,7 @@ import React, { Component } from 'react';
 import { EuiLink, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { blurButtonOnClick } from '../../util/component_utils';
 
 /*
  * Component for rendering a list of record influencers inside a cell in the anomalies table.
@@ -59,13 +60,13 @@ export class InfluencersCell extends Component {
               <EuiButtonIcon
                 size="s"
                 className="filter-button"
-                onClick={() =>
+                onClick={blurButtonOnClick(() => {
                   influencerFilter(
                     influencer.influencerFieldName,
                     influencer.influencerFieldValue,
                     '+'
-                  )
-                }
+                  );
+                })}
                 iconType="plusInCircle"
                 aria-label={i18n.translate(
                   'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel',
@@ -86,13 +87,13 @@ export class InfluencersCell extends Component {
               <EuiButtonIcon
                 size="s"
                 className="filter-button"
-                onClick={() =>
+                onClick={blurButtonOnClick(() => {
                   influencerFilter(
                     influencer.influencerFieldName,
                     influencer.influencerFieldValue,
                     '-'
-                  )
-                }
+                  );
+                })}
                 iconType="minusInCircle"
                 aria-label={i18n.translate(
                   'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel',

diff --git a/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx b/x-pack/plugins/ml/public/application/components/entity_cell/entity_cell.tsx
@@ -13,6 +13,7 @@ import { i18n } from '@kbn/i18n';
 import { EMPTY_FIELD_VALUE_LABEL } from '../../timeseriesexplorer/components/entity_control/entity_control';
 import { MLCATEGORY } from '../../../../common/constants/field_types';
 import { ENTITY_FIELD_OPERATIONS } from '../../../../common/util/anomaly_utils';
+import { blurButtonOnClick } from '../../util/component_utils';
 
 export type EntityCellFilter = (
   entityName: string,
@@ -41,7 +42,9 @@ function getAddFilter({ entityName, entityValue, filter }: EntityCellProps) {
         <EuiButtonIcon
           size="s"
           className="filter-button"
-          onClick={() => filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.ADD)}
+          onClick={blurButtonOnClick(() => {
+            filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.ADD);
+          })}
           iconType="plusInCircle"
           aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', {
             defaultMessage: 'Add filter',
@@ -66,7 +69,9 @@ function getRemoveFilter({ entityName, entityValue, filter }: EntityCellProps) {
         <EuiButtonIcon
           size="s"
           className="filter-button"
-          onClick={() => filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.REMOVE)}
+          onClick={blurButtonOnClick(() => {
+            filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.REMOVE);
+          })}
           iconType="minusInCircle"
           aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', {
             defaultMessage: 'Remove filter',

diff --git a/.../explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx b/.../explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx
@@ -12,6 +12,7 @@ import {
   ENTITY_FIELD_OPERATIONS,
   EntityFieldOperation,
 } from '../../../../../../../common/util/anomaly_utils';
+import { blurButtonOnClick } from '../../../../../util/component_utils';
 import './_entity_filter.scss';
 
 interface EntityFilterProps {
@@ -41,13 +42,13 @@ export const EntityFilter: FC<EntityFilterProps> = ({
         <EuiButtonIcon
           size="s"
           className="filter-button"
-          onClick={() =>
+          onClick={blurButtonOnClick(() => {
             onFilter({
               influencerFieldName,
               influencerFieldValue,
               action: ENTITY_FIELD_OPERATIONS.ADD,
-            })
-          }
+            });
+          })}
           iconType="plusInCircle"
           aria-label={i18n.translate('xpack.ml.entityFilter.addFilterAriaLabel', {
             defaultMessage: 'Add filter for {influencerFieldName} {influencerFieldValue}',
@@ -66,13 +67,13 @@ export const EntityFilter: FC<EntityFilterProps> = ({
         <EuiButtonIcon
           size="s"
           className="filter-button"
-          onClick={() =>
+          onClick={blurButtonOnClick(() => {
             onFilter({
               influencerFieldName,
               influencerFieldValue,
               action: ENTITY_FIELD_OPERATIONS.REMOVE,
-            })
-          }
+            });
+          })}
           iconType="minusInCircle"
           aria-label={i18n.translate('xpack.ml.entityFilter.removeFilterAriaLabel', {
             defaultMessage: 'Remove filter for {influencerFieldName} {influencerFieldValue}',

diff --git a/x-pack/plugins/ml/public/application/util/component_utils.ts b/x-pack/plugins/ml/public/application/util/component_utils.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { MouseEvent } from 'react';
+
+/**
+ * Removes focus from a button element when clicked, for example to
+ * ensure a wrapping tooltip is hidden on click.
+ */
+export const blurButtonOnClick = (callback: Function) => (event: MouseEvent<HTMLButtonElement>) => {
+  (event.target as HTMLButtonElement).blur();
+  callback();
+};