From 9ab2f77ee252b15e708e3f601b0fbdfabf684456 Mon Sep 17 00:00:00 2001
From: Orne Brocaar <info@brocaar.com>
Date: Tue, 5 Jul 2022 15:18:43 +0100
Subject: [PATCH] Fix CodeMirror not refreshing on value change.

On changing a different device-profile template and thus changing the
this.state.value, CodeMirror would not rerender until focussing the
textarea field.
---
 ui/src/components/CodeEditor.tsx                   | 5 ++++-
 ui/src/views/device-profiles/DeviceProfileForm.tsx | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/CodeEditor.tsx b/ui/src/components/CodeEditor.tsx
index 8ca5f0ce..d3141b7b 100644
--- a/ui/src/components/CodeEditor.tsx
+++ b/ui/src/components/CodeEditor.tsx
@@ -17,6 +17,7 @@ interface IProps {
 
 interface IState {
   value: string;
+  reloadKey: number;
 }
 
 class CodeEditor extends Component<IProps, IState> {
@@ -24,6 +25,7 @@ class CodeEditor extends Component<IProps, IState> {
     super(props);
     this.state = {
       value: "",
+      reloadKey: 0,
     };
   }
 
@@ -43,6 +45,7 @@ class CodeEditor extends Component<IProps, IState> {
     if (this.props.value) {
       this.setState({
         value: this.props.value,
+        reloadKey: this.state.reloadKey + 1,
       });
     }
   }
@@ -75,7 +78,7 @@ class CodeEditor extends Component<IProps, IState> {
     return (
       <Form.Item label={this.props.label} name={this.props.name} tooltip={this.props.tooltip}>
         <div style={{ border: "1px solid #cccccc" }}>
-          <CodeMirror value={this.state.value} options={codeMirrorOptions} onBeforeChange={this.handleChange} />
+          <CodeMirror key={`code-editor-refresh-${this.state.reloadKey}`} value={this.state.value} options={codeMirrorOptions} onBeforeChange={this.handleChange} />
         </div>
       </Form.Item>
     );
diff --git a/ui/src/views/device-profiles/DeviceProfileForm.tsx b/ui/src/views/device-profiles/DeviceProfileForm.tsx
index 87f60e22..9b963280 100644
--- a/ui/src/views/device-profiles/DeviceProfileForm.tsx
+++ b/ui/src/views/device-profiles/DeviceProfileForm.tsx
@@ -331,8 +331,6 @@ class DeviceProfileForm extends Component<IProps, IState> {
       templateModalVisible: false,
     });
 
-    console.log(dp.toObject().tagsMap);
-
     this.formRef.current.setFieldsValue({
       name: dp.getName(),
       description: dp.getDescription(),