From a11758ef759c7dc1dab3bebc8dfd274f96c47f14 Mon Sep 17 00:00:00 2001
From: Pavel Tomasko <ptomasko@purple-technology.com>
Date: Mon, 15 Jan 2024 22:56:46 +0100
Subject: [PATCH] FIX: Duplicate ids associate labels with bad checkbox inputs

---
 frontend-html/src/gui/Components/Form/CheckBox.tsx        | 8 +++++---
 .../gui/connections/MobileComponents/Form/CheckBox.tsx    | 1 -
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend-html/src/gui/Components/Form/CheckBox.tsx b/frontend-html/src/gui/Components/Form/CheckBox.tsx
index c420323be0..03dc73be2a 100644
--- a/frontend-html/src/gui/Components/Form/CheckBox.tsx
+++ b/frontend-html/src/gui/Components/Form/CheckBox.tsx
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { IProperty } from "model/entities/types/IProperty";
 import { BoolEditor } from "gui/Components/ScreenElements/Editors/BoolEditor";
 import S from "gui/Components/Form/CheckBox.module.scss";
@@ -27,6 +27,7 @@ import { onFieldBlur } from "model/actions-ui/DataView/TableView/onFieldBlur";
 import { onFieldChange } from "model/actions-ui/DataView/TableView/onFieldChange";
 import { IFocusable } from "model/entities/FormFocusManager";
 import { FieldDimensions } from "gui/Components/Form/FieldDimensions";
+import * as uuid from 'uuid';
 
 export const CheckBox: React.FC<{
   checked: boolean;
@@ -52,6 +53,7 @@ export const CheckBox: React.FC<{
     }),
   };
 })((props) => {
+  const labelId = useMemo(() => uuid.v4(), []);
   const [isFocused, setIsFocused] = useState<boolean>(false);
 
   const label = props.property!.name;
@@ -103,7 +105,7 @@ export const CheckBox: React.FC<{
     <div>
       <div className={S.editor} style={formFieldStyle()}>
         <BoolEditor
-          id={props.property!.modelInstanceId}
+          id={labelId}
           value={props.checked}
           isReadOnly={props.readOnly}
           onBlur={onInputBlur}
@@ -115,7 +117,7 @@ export const CheckBox: React.FC<{
         />
       </div>
       <label
-        htmlFor={props.property!.modelInstanceId}
+        htmlFor={labelId}
         className={S.caption + " " + (isFocused ? S.focusedLabel : S.unFocusedLabel)}
         style={captionStyle()}
       >
diff --git a/frontend-html/src/gui/connections/MobileComponents/Form/CheckBox.tsx b/frontend-html/src/gui/connections/MobileComponents/Form/CheckBox.tsx
index ff9573db80..582540b31f 100644
--- a/frontend-html/src/gui/connections/MobileComponents/Form/CheckBox.tsx
+++ b/frontend-html/src/gui/connections/MobileComponents/Form/CheckBox.tsx
@@ -72,7 +72,6 @@ export const MobileCheckBox: React.FC<{
   return (
     <div>
       <label
-        htmlFor={props.property!.modelInstanceId}
         style={captionStyle()}
       >
         {label}