From f72459db595a1abf05b0b16956d946b714cef009 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 12 Aug 2022 14:43:17 +0300
Subject: [PATCH] Prevent continous focusing within RemoteSelect

---
 .../src/containers/RemoteSelect/RemoteSelect.tsx   | 12 ++++--------
 .../containers/ScheduleForm/ScheduleForm.config.ts |  4 ++++
 .../src/containers/ScheduleForm/ScheduleForm.tsx   | 14 +-------------
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx b/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
index 2f76b170..7f061eb5 100644
--- a/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
+++ b/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}
diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts
index 7019d0f4..aad545f1 100644
--- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.config.ts
+++ b/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',
   },
diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
index 380f89ae..0273cb68 100644
--- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
+++ b/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 (