From 6a85124749ca44018074179a7f3983ba136b285e Mon Sep 17 00:00:00 2001
From: Favour Ohans <fohanekwu@gmail.com>
Date: Sat, 17 Aug 2024 07:25:30 +0100
Subject: [PATCH] Fix compatibility table issue

---
 .../components/compatibility/CompatibilitySelect.tsx  |  7 ++++---
 v2/src/components/compatibility/index.tsx             | 11 ++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/v2/src/components/compatibility/CompatibilitySelect.tsx b/v2/src/components/compatibility/CompatibilitySelect.tsx
index 66590c168..1aeaa6f69 100644
--- a/v2/src/components/compatibility/CompatibilitySelect.tsx
+++ b/v2/src/components/compatibility/CompatibilitySelect.tsx
@@ -8,17 +8,18 @@ export type CompatibilitySelectOptionType = {
 type CompatibilitySelectProps = {
     options: CompatibilitySelectOptionType[];
     setOption: (value: CompatibilitySelectOptionType) => void;
+    selectedOption: CompatibilitySelectOptionType|undefined
     disabled?: boolean;
 };
 
-export default function CompatibilitySelect({ setOption, options, disabled = false }: CompatibilitySelectProps) {
+export default function CompatibilitySelect({ setOption, options, selectedOption, disabled = false }: CompatibilitySelectProps) {
     function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
         const selectedOption = options.find(option => option.id === e.currentTarget.value)!;
         setOption(selectedOption);
     }
     return (
-        <select disabled={disabled} className="select-container" onChange={handleChange}>
-            <option disabled>Please select</option>
+        <select disabled={disabled} className="select-container" onChange={handleChange} value={selectedOption?.id}>
+            <option disabled={disabled}>Please select</option>
             {options.map(option => {
                 return (
                     <option value={option.id} key={option.id}>
diff --git a/v2/src/components/compatibility/index.tsx b/v2/src/components/compatibility/index.tsx
index 0e5e28c78..1961ee89c 100644
--- a/v2/src/components/compatibility/index.tsx
+++ b/v2/src/components/compatibility/index.tsx
@@ -160,9 +160,9 @@ export default function CompatibilityMatrix() {
                         <div>
                             <span className="compatibility_matrix_text_one">Backend SDK</span>
                             {supportedBackendSdks !== undefined ? (
-                                <Select setOption={setSelectedBackendnSdk} options={supportedBackendSdks} />
+                                <Select setOption={setSelectedBackendnSdk} options={supportedBackendSdks} selectedOption={selectedBackendSdk}/>
                             ) : isFailedFetchSupportedSdks === true ? (
-                                <Select disabled setOption={setSelectedBackendnSdk} options={[]} />
+                                <Select disabled setOption={setSelectedBackendnSdk} options={[]} selectedOption={selectedBackendSdk}/>
                             ) : (
                                 <div className="shimmer"></div>
                             )}
@@ -170,9 +170,9 @@ export default function CompatibilityMatrix() {
                         <div>
                             <span className="compatibility_matrix_text_one">Frontend SDK</span>
                             {supportedFrontendSdks !== undefined ? (
-                                <Select setOption={setSelectedFrontendSdk} options={supportedFrontendSdks} />
+                                <Select setOption={setSelectedFrontendSdk} options={supportedFrontendSdks} selectedOption={selectedFrontendSdk}/>
                             ) : isFailedFetchSupportedSdks === true ? (
-                                <Select disabled setOption={setSelectedFrontendSdk} options={[]} />
+                                <Select disabled setOption={setSelectedFrontendSdk} options={[]} selectedOption={selectedFrontendSdk}/>
                             ) : (
                                 <div className="shimmer"></div>
                             )}
@@ -192,7 +192,7 @@ export default function CompatibilityMatrix() {
                         </div>
                         <div className="compatibility_matrix_box_body sdk_version_select_container">
                             {compatibilityMatrix !== undefined ? (
-                                <Select setOption={setSelectedCoreVersion} options={selectableCoreVersions} />
+                                <Select setOption={setSelectedCoreVersion} options={selectableCoreVersions} selectedOption={selectedCoreVersion}/>
                             ) : (
                                 <div className="shimmer"></div>
                             )}
@@ -224,6 +224,7 @@ export default function CompatibilityMatrix() {
                                 <Select
                                     setOption={setSelectedBackendSdkVersion}
                                     options={selectableBackendSdkVersions}
+                                    selectedOption={selectedBackendSdkVersion}
                                 />
                             ) : (
                                 <div className="shimmer"></div>