From 95aeaa99ff620d9063401b260dda0c81e309b31d Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 3 Sep 2020 15:40:16 +0200
Subject: [PATCH] [Discover] Fix sidebar element focus behavior when adding /
 removing columns (#75749) (#76621)

* Use field.name instead of idx for key in li element

* onClick adds focus to button

* prevent Chrome jumping back to last focused element
---
 .../public/application/angular/discover.html  |  9 ++++----
 .../components/sidebar/discover_field.tsx     |  6 +++++
 .../components/sidebar/discover_sidebar.tsx   | 22 +++++++++----------
 .../sidebar/discover_sidebar_directive.ts     |  1 -
 .../public/field_button/field_button.tsx      | 11 +++++++++-
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/plugins/discover/public/application/angular/discover.html b/src/plugins/discover/public/application/angular/discover.html
index d3d4f524873d88..94f13e1cd81325 100644
--- a/src/plugins/discover/public/application/angular/discover.html
+++ b/src/plugins/discover/public/application/angular/discover.html
@@ -31,7 +31,6 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
             on-remove-field="removeColumn"
             selected-index-pattern="searchSource.getField('index')"
             set-index-pattern="setIndexPattern"
-            state="state"
           >
           </discover-sidebar>
         </div>
@@ -78,11 +77,11 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
               class="dscTimechart"
               ng-if="opts.timefield"
             >
-              <timechart-header 
+              <timechart-header
                 from="toMoment(timeRange.from)"
-                to="toMoment(timeRange.to)" 
-                options="intervalOptions" 
-                on-change-interval="changeInterval" 
+                to="toMoment(timeRange.to)"
+                options="intervalOptions"
+                on-change-interval="changeInterval"
                 state-interval="state.interval"
                 show-scaled-info="bucketInterval.scaled"
                 bucket-interval-description="bucketInterval.description"
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
index 639dbfe09277cd..bb330cba68e2e6 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -133,6 +133,9 @@ export function DiscoverField({
           iconType="plusInCircleFilled"
           className="dscSidebarItem__action"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
+            if (ev.type === 'click') {
+              ev.currentTarget.focus();
+            }
             ev.preventDefault();
             ev.stopPropagation();
             toggleDisplay(field);
@@ -155,6 +158,9 @@ export function DiscoverField({
           iconType="cross"
           className="dscSidebarItem__action"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
+            if (ev.type === 'click') {
+              ev.currentTarget.focus();
+            }
             ev.preventDefault();
             ev.stopPropagation();
             toggleDisplay(field);
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
index 361c0707fef6b4..850624888b24a3 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -30,7 +30,6 @@ import { SavedObject } from '../../../../../../core/types';
 import { FIELDS_LIMIT_SETTING } from '../../../../common';
 import { groupFields } from './lib/group_fields';
 import { IndexPatternField, IndexPattern, UI_SETTINGS } from '../../../../../data/public';
-import { AppState } from '../../angular/discover_state';
 import { getDetails } from './lib/get_details';
 import { getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter';
 import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list';
@@ -74,10 +73,6 @@ export interface DiscoverSidebarProps {
    * Callback function to select another index pattern
    */
   setIndexPattern: (id: string) => void;
-  /**
-   * Current app state, used for generating a link to visualize
-   */
-  state: AppState;
 }
 
 export function DiscoverSidebar({
@@ -90,7 +85,6 @@ export function DiscoverSidebar({
   onRemoveField,
   selectedIndexPattern,
   setIndexPattern,
-  state,
 }: DiscoverSidebarProps) {
   const [showFields, setShowFields] = useState(false);
   const [fields, setFields] = useState<IndexPatternField[] | null>(null);
@@ -185,10 +179,10 @@ export function DiscoverSidebar({
                 aria-labelledby="selected_fields"
                 data-test-subj={`fieldList-selected`}
               >
-                {selectedFields.map((field: IndexPatternField, idx: number) => {
+                {selectedFields.map((field: IndexPatternField) => {
                   return (
                     <li
-                      key={`field${idx}`}
+                      key={`field${field.name}`}
                       data-attr-field={field.name}
                       className="dscSidebar__item"
                     >
@@ -260,10 +254,10 @@ export function DiscoverSidebar({
                 aria-labelledby="available_fields available_fields_popular"
                 data-test-subj={`fieldList-popular`}
               >
-                {popularFields.map((field: IndexPatternField, idx: number) => {
+                {popularFields.map((field: IndexPatternField) => {
                   return (
                     <li
-                      key={`field${idx}`}
+                      key={`field${field.name}`}
                       data-attr-field={field.name}
                       className="dscSidebar__item"
                     >
@@ -290,9 +284,13 @@ export function DiscoverSidebar({
             aria-labelledby="available_fields"
             data-test-subj={`fieldList-unpopular`}
           >
-            {unpopularFields.map((field: IndexPatternField, idx: number) => {
+            {unpopularFields.map((field: IndexPatternField) => {
               return (
-                <li key={`field${idx}`} data-attr-field={field.name} className="dscSidebar__item">
+                <li
+                  key={`field${field.name}`}
+                  data-attr-field={field.name}
+                  className="dscSidebar__item"
+                >
                   <DiscoverField
                     field={field}
                     indexPattern={selectedIndexPattern}
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_directive.ts b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_directive.ts
index 624ec0f7578947..b271c920e5e010 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar_directive.ts
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar_directive.ts
@@ -29,6 +29,5 @@ export function createDiscoverSidebarDirective(reactDirective: any) {
     ['onRemoveField', { watchDepth: 'reference' }],
     ['selectedIndexPattern', { watchDepth: 'reference' }],
     ['setIndexPattern', { watchDepth: 'reference' }],
-    ['state', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/src/plugins/kibana_react/public/field_button/field_button.tsx b/src/plugins/kibana_react/public/field_button/field_button.tsx
index e5833b261946ae..26e6453e4c48b3 100644
--- a/src/plugins/kibana_react/public/field_button/field_button.tsx
+++ b/src/plugins/kibana_react/public/field_button/field_button.tsx
@@ -100,7 +100,16 @@ export function FieldButton({
 
   return (
     <div className={classes} {...rest}>
-      <button onClick={onClick} {...buttonProps} className={buttonClasses}>
+      <button
+        onClick={(e) => {
+          if (e.type === 'click') {
+            e.currentTarget.focus();
+          }
+          onClick();
+        }}
+        {...buttonProps}
+        className={buttonClasses}
+      >
         {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
         {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
         {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}