FIX: Duplicate ids associate labels with bad checkbox inputs (#2394)

Co-authored-by: Pavel Tomasko <ptomasko@purple-technology.com>

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()}
       >

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}