[Filter Bar] Remove flickering when opening filter bar popover (#56222)

Maja Grubic · elasticmachine · Maja Grubic · commit 01f0c9ddb2e6 · 2020-01-30T14:10:13.000Z
Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -96,6 +96,7 @@ function FilterBarUI(props: Props) {
           withTitle
           panelPaddingSize="none"
           ownFocus={true}
+          initialFocus=".filterEditor__hiddenItem"
         >
           <EuiFlexItem grow={false}>
             <div style={{ width: 400 }}>
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
@@ -95,6 +95,7 @@ class FilterEditorUI extends Component<Props, State> {
                 defaultMessage="Edit filter"
               />
             </EuiFlexItem>
+            <EuiFlexItem grow={false} className="filterEditor__hiddenItem" />
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty size="xs" onClick={this.toggleCustomEditor}>
                 {this.state.isCustomEditorOpen ? (

Original file line number	Diff line number	Diff line change
`@@ -96,6 +96,7 @@ function FilterBarUI(props: Props) {`
`96`	`96`	`withTitle`
`97`	`97`	`panelPaddingSize="none"`
`98`	`98`	`ownFocus={true}`
	`99`	`+ initialFocus=".filterEditor__hiddenItem"`
`99`	`100`	`>`
`100`	`101`	`<EuiFlexItem grow={false}>`
`101`	`102`	`<div style={{ width: 400 }}>`