[Discover] Fix sidebar element focus behavior when adding / removing …

…columns (#75749)

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

* onClick adds focus to button

* prevent Chrome jumping back to last focused element

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"

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);

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}

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' }],
  ]);
 }

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>}