From 5b1ce3988e6fe59add197d11432856e796ee574b Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 11 Apr 2023 12:23:55 +0300
Subject: [PATCH] Fix a bug in GForm (#1712)

# What this PR does

Fixed `onChange` handler within `GForm` component
---
 CHANGELOG.md                                  |  6 ++
 grafana-plugin/src/components/GForm/GForm.tsx | 55 ++++++-------------
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72dc0e52..0b705e7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fixed a bug in GForm's RemoteSelect where the value for Dropdown could not change
+
 ## v1.2.8 (2023-04-06)
 
 ### Changed
diff --git a/grafana-plugin/src/components/GForm/GForm.tsx b/grafana-plugin/src/components/GForm/GForm.tsx
index 5e2c404a..2a9ddcdd 100644
--- a/grafana-plugin/src/components/GForm/GForm.tsx
+++ b/grafana-plugin/src/components/GForm/GForm.tsx
@@ -17,17 +17,19 @@ const nullNormalizer = (value: string) => {
   return value || null;
 };
 
-function renderFormControl(formItem: FormItem, register: any, control: any, onChangeFn: () => void) {
+function renderFormControl(formItem: FormItem, register: any, control: any, onChangeFn: (field, value) => void) {
   switch (formItem.type) {
     case FormItemType.Input:
-      return <Input {...register(formItem.name, formItem.validation)} onChange={onChangeFn} />;
+      return (
+        <Input {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
+      );
 
     case FormItemType.TextArea:
       return (
         <TextArea
           rows={formItem.extra?.rows || 4}
           {...register(formItem.name, formItem.validation)}
-          onChange={onChangeFn}
+          onChange={(value) => onChangeFn(undefined, value)}
         />
       );
 
@@ -36,15 +38,7 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
         <InputControl
           render={({ field }) => {
             return (
-              <GSelect
-                isMulti={true}
-                {...field}
-                {...formItem.extra}
-                onChange={(value) => {
-                  field.onChange(value);
-                  onChangeFn();
-                }}
-              />
+              <GSelect isMulti={true} {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />
             );
           }}
           control={control}
@@ -55,17 +49,8 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
     case FormItemType.Select:
       return (
         <InputControl
-          render={({ field: { onChange, ...field } }) => {
-            return (
-              <Select
-                {...field}
-                {...formItem.extra}
-                onChange={(value) => {
-                  onChange(value.value);
-                  onChangeFn();
-                }}
-              />
-            );
+          render={({ field: { ...field } }) => {
+            return <Select {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />;
           }}
           control={control}
           name={formItem.name}
@@ -75,17 +60,8 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
     case FormItemType.GSelect:
       return (
         <InputControl
-          render={({ field: { onChange, ...field } }) => {
-            return (
-              <GSelect
-                {...field}
-                {...formItem.extra}
-                onChange={(value) => {
-                  onChange(value);
-                  onChangeFn();
-                }}
-              />
-            );
+          render={({ field: { ...field } }) => {
+            return <GSelect {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />;
           }}
           control={control}
           name={formItem.name}
@@ -93,13 +69,15 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
       );
 
     case FormItemType.Switch:
-      return <Switch {...register(formItem.name, formItem.validation)} onChange={onChangeFn} />;
+      return (
+        <Switch {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
+      );
 
     case FormItemType.RemoteSelect:
       return (
         <InputControl
           render={({ field: { ...field } }) => {
-            return <RemoteSelect {...field} {...formItem.extra} onChange={onChangeFn} />;
+            return <RemoteSelect {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value)} />;
           }}
           control={control}
           name={formItem.name}
@@ -133,7 +111,10 @@ class GForm extends React.Component<GFormProps, {}> {
                 error={`${capitalCase(formItem.name)} is required`}
                 description={formItem.description}
               >
-                {renderFormControl(formItem, register, control, () => this.forceUpdate())}
+                {renderFormControl(formItem, register, control, (field, value) => {
+                  field?.onChange(value);
+                  this.forceUpdate();
+                })}
               </Field>
             );
           });