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 index 1f2236ad3e6a7a..0059bec2929d02 100644 --- 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 { + 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 { + 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 index a79c8a63b3bc6d..f4a3b6dbf69c4a 100644 --- 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) { 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) { 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/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx index 2ede9d380f3bf9..66f4052a6952fc 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx +++ b/x-pack/plugins/ml/public/application/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 = ({ + 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 = ({ + 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 new file mode 100644 index 00000000000000..764e4f0edd83ba --- /dev/null +++ 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) => { + (event.target as HTMLButtonElement).blur(); + callback(); +};