From a05fef269ad8d90339bbacae7e8c1e496fb36145 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 12 Dec 2019 06:57:27 +0100
Subject: [PATCH] Disable/enable filter with click+shift on a filter badge
 (#52751)

---
 src/plugins/data/public/ui/filter_bar/filter_item.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/plugins/data/public/ui/filter_bar/filter_item.tsx b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
index 1921f6672755d..b26bb05f926d5 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_item.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
@@ -20,7 +20,7 @@
 import { EuiContextMenu, EuiPopover } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
-import React, { Component } from 'react';
+import React, { Component, MouseEvent } from 'react';
 import { IUiSettingsClient } from 'src/core/public';
 import { FilterEditor } from './filter_editor';
 import { FilterView } from './filter_view';
@@ -46,6 +46,13 @@ class FilterItemUI extends Component<Props, State> {
     isPopoverOpen: false,
   };
 
+  private handleBadgeClick = (e: MouseEvent<HTMLInputElement>) => {
+    if (e.shiftKey) {
+      this.onToggleDisabled();
+    } else {
+      this.togglePopover();
+    }
+  };
   public render() {
     const { filter, id } = this.props;
     const { negate, disabled } = filter.meta;
@@ -73,7 +80,7 @@ class FilterItemUI extends Component<Props, State> {
         valueLabel={valueLabel}
         className={classes}
         iconOnClick={() => this.props.onRemove()}
-        onClick={this.togglePopover}
+        onClick={this.handleBadgeClick}
         data-test-subj={`filter ${dataTestSubjDisabled} ${dataTestSubjKey} ${dataTestSubjValue}`}
       />
     );