Merge pull request #363 from grafana/360-select-focus

360 - Prevent continuous focus on RemoteSelect component

grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx

@@ -3,14 +3,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { AsyncMultiSelect, AsyncSelect } from '@grafana/ui';
 import cn from 'classnames/bind';
-import { get } from 'lodash-es';
 import { inject, observer } from 'mobx-react';
-import qs from 'query-string';
-import Emoji from 'react-emoji-render';
-import { debounce } from 'throttle-debounce';
 
-import { API_PROXY_PREFIX, makeRequest } from 'network';
-import { SelectOption } from 'state/types';
+import { makeRequest } from 'network';
 
 import styles from './RemoteSelect.module.css';
 
@@ -30,6 +25,7 @@ interface RemoteSelectProps {
   showSearch?: boolean;
   allowClear?: boolean;
   isMulti?: boolean;
+  openMenuOnFocus?: boolean;
   getOptionLabel?: (item: SelectableValue) => React.ReactNode;
 }
 
@@ -38,7 +34,6 @@ const RemoteSelect = inject('store')(
     const {
       autoFocus,
       fieldToShow = 'display_name',
-      getFieldToShow,
       valueField = 'value',
       isMulti = false,
       placeholder,
@@ -50,6 +45,7 @@ const RemoteSelect = inject('store')(
       showSearch = true,
       allowClear,
       getOptionLabel,
+      openMenuOnFocus = true,
     } = props;
 
     const [options, setOptions] = useState<SelectableValue[] | undefined>();
@@ -103,7 +99,7 @@ const RemoteSelect = inject('store')(
       // @ts-ignore
       <Tag
         menuShouldPortal
-        openMenuOnFocus
+        openMenuOnFocus={openMenuOnFocus}
         isClearable={allowClear}
         autoFocus={autoFocus}
         disabled={disabled}

grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts

@@ -37,6 +37,7 @@ const commonFields: FormItem[] = [
     extra: {
       href: '/schedules/notify_oncall_shift_freq_options/',
       displayField: 'display_name',
+      openMenuOnFocus: false,
     },
     description: 'Specify the frequency that shift notifications are sent to scheduled team members.',
   },
@@ -48,6 +49,7 @@ const commonFields: FormItem[] = [
     extra: {
       href: '/schedules/notify_empty_oncall_options/',
       displayField: 'display_name',
+      openMenuOnFocus: false,
     },
     description: 'Specify how to notify team members when there is no one scheduled for an on-call shift.',
   },
@@ -59,6 +61,7 @@ const commonFields: FormItem[] = [
     extra: {
       href: '/schedules/mention_options/',
       displayField: 'display_name',
+      openMenuOnFocus: false,
     },
     description: 'Specify how to notify a team member when their on-call shift begins ',
   },
@@ -70,6 +73,7 @@ const commonFields: FormItem[] = [
     extra: {
       href: '/schedules/mention_options/',
       displayField: 'display_name',
+      openMenuOnFocus: false,
     },
     description: 'Specify how to notify a team member when their shift is the next one scheduled',
   },

grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx

@@ -31,7 +31,7 @@ const ScheduleForm = observer((props: ScheduleFormProps) => {
 
   const store = useStore();
 
-  const { scheduleStore, userStore, grafanaTeamStore } = store;
+  const { scheduleStore, userStore } = store;
 
   const data = useMemo(() => {
     return id === 'new'
@@ -53,18 +53,6 @@ const ScheduleForm = observer((props: ScheduleFormProps) => {
     [id]
   );
 
-  const getOptionLabel = (item: SelectableValue) => {
-    const team = grafanaTeamStore.items[item.value];
-    return (
-      <HorizontalGroup>
-        {item.label}
-        <Avatar src={team?.avatar_url} size="small" />
-      </HorizontalGroup>
-    );
-  };
-
-  const handleTeamChange = useCallback((value) => {}, []);
-
   const formConfig = data.type === ScheduleType.Ical ? iCalForm : calendarForm;
 
   return (