From 0d271113b7e78a34fe7819763b9c2ee451fb1002 Mon Sep 17 00:00:00 2001
From: a-limyr <andreas.limyr@entur.org>
Date: Mon, 9 Dec 2024 14:46:16 +0100
Subject: [PATCH] Fixes for editing of key value pairs.

---
 .../EditStopPage/EditKeyValuePair.js          | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/EditStopPage/EditKeyValuePair.js b/src/components/EditStopPage/EditKeyValuePair.js
index a948b2175..750227076 100644
--- a/src/components/EditStopPage/EditKeyValuePair.js
+++ b/src/components/EditStopPage/EditKeyValuePair.js
@@ -1,17 +1,3 @@
-/*
- *  Licensed under the EUPL, Version 1.2 or – as soon they will be approved by
-the European Commission - subsequent versions of the EUPL (the "Licence");
-You may not use this work except in compliance with the Licence.
-You may obtain a copy of the Licence at:
-
-  https://joinup.ec.europa.eu/software/page/eupl
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the Licence is distributed on an "AS IS" basis,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the Licence for the specific language governing permissions and
-limitations under the Licence. */
-
 import React from "react";
 import TextField from "@mui/material/TextField";
 import FlatButton from "@mui/material/Button";
@@ -20,11 +6,26 @@ import { injectIntl } from "react-intl";
 class EditKeyValuePair extends React.Component {
   constructor(props) {
     super(props);
+    const { keyValues, editingKey } = props;
+
     this.state = {
-      values: [],
+      values: this.getValuesByKey(keyValues, editingKey) || "", // Initialize with existing values
     };
   }
 
+  componentDidUpdate(prevProps) {
+    const { keyValues, editingKey } = this.props;
+
+    // Update the state if editingKey or keyValues have changed
+    if (
+      prevProps.editingKey !== editingKey ||
+      prevProps.keyValues !== keyValues
+    ) {
+      const updatedValues = this.getValuesByKey(keyValues, editingKey) || "";
+      this.setState({ values: updatedValues });
+    }
+  }
+
   handleUpdate() {
     const { handleUpdateValues, editingKey } = this.props;
     const { values } = this.state;
@@ -32,18 +33,20 @@ class EditKeyValuePair extends React.Component {
   }
 
   getValuesByKey(keyValues, key) {
+    if (!keyValues || !Array.isArray(keyValues)) return ""; // Safeguard for undefined or invalid keyValues
+
     for (let i = 0; i < keyValues.length; i++) {
       if (keyValues[i].key === key) {
         return keyValues[i].values.join("\r\n");
       }
     }
-    return [];
+    return ""; // Return empty string if key not found
   }
 
   render() {
     const { editingKey, isOpen, intl } = this.props;
     const { formatMessage } = intl;
-    const { values = "" } = this.state;
+    const { values } = this.state;
 
     if (!isOpen) return null;
 
@@ -61,9 +64,9 @@ class EditKeyValuePair extends React.Component {
                 values: event.target.value,
               });
             }}
+            multiline
             value={values}
             fullWidth={true}
-            multiLine={true}
           />
         </div>
         <FlatButton