From da877e95270637568afdd6b111c24002a56f4346 Mon Sep 17 00:00:00 2001
From: Stephan Bruijnis <stephanbruijnis@gmail.com>
Date: Fri, 23 Feb 2024 13:16:20 +0100
Subject: [PATCH] Fix validation feedback message positioning (v1.2.2)

Import Fragment from React to avoid needing a div as wrapper for the Render
Move the <Alert> as sybling of the div with checkboxes (instead of child) so the Alert ValidationFeedback is actually rendered below the checkboxes instead of next to the checkboxes (when showing vertically)
---
 package-lock.json       |  2 +-
 package.json            |  4 ++--
 src/MultiSelectEnum.tsx | 34 ++++++++++++++++++----------------
 src/package.xml         |  2 +-
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cd380e3..ed9fce0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "multiselectenum",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8ea86be..043a00b 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "multiselectenum",
   "widgetName": "MultiSelectEnum",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Select multiple enumeration values",
-  "copyright": "2023 Stephan Bruijnis Consultancy",
+  "copyright": "2024 Stephan Bruijnis Consultancy",
   "author": "Stephan Bruijnis",
   "engines": {
     "node": ">=12"
diff --git a/src/MultiSelectEnum.tsx b/src/MultiSelectEnum.tsx
index 74dbc19..ffa329b 100644
--- a/src/MultiSelectEnum.tsx
+++ b/src/MultiSelectEnum.tsx
@@ -1,4 +1,4 @@
-import { Component, ReactNode, createElement } from "react";
+import { Component, ReactNode, createElement, Fragment } from "react";
 import { hot } from "react-hot-loader/root";
 
 import { MultiSelectEnumContainerProps } from "../typings/MultiSelectEnumProps";
@@ -31,18 +31,20 @@ class MultiSelectEnum extends Component<MultiSelectEnumContainerProps> {
         // Current value of the string attribute that contains the comma separate values (enumeration keys)
         // const valueStr = this.props.enumAttribute_str.value || "";
         // console.debug("enumAttribute_str: " + { valueStr });
-       
+
         // Enable validation feedback on this input element
         const validationFeedback = this.props.enumAttribute.validation;
         const className = classNames(this.props.className, this.props.orientationMode === "horizontal" ? "checkboxes inline" : "checkboxes");
         return (
-                <div 
+            <Fragment>
+                <div
                     className={className}
                     style={this.props.style}
                     tabIndex={this.props.tabIndex}>
                     {this.universe.map((this.eachEnumKey), this)}
-                    <Alert>{validationFeedback}</Alert>
                 </div>
+                <Alert>{validationFeedback}</Alert>
+            </Fragment>
         );
     }
 
@@ -53,10 +55,10 @@ class MultiSelectEnum extends Component<MultiSelectEnumContainerProps> {
         // Determine of the current enumeration value (key) is available in the string and thus should be shown as a checked checkbox
         var checkedState = valueStr.includes(enumKey);
 
-        if (this.renderAsText()){
-            if(checkedState){
+        if (this.renderAsText()) {
+            if (checkedState) {
                 return (
-                    <CheckboxText 
+                    <CheckboxText
                         key={i}
                         index={i}
                         enumKey={enumKey}
@@ -72,21 +74,21 @@ class MultiSelectEnum extends Component<MultiSelectEnumContainerProps> {
         else {
             return (
                 <CheckboxItem
-                        key={i}
-                        index={i}
-                        enumKey={enumKey}
-                        label={this.props.enumAttribute.formatter.format(enumKey)}
-                        checkedState={checkedState}
-                        onUpdate={this.onUpdateHandle}
-                        disabled={this.isReadOnly()}
-                        widgetId={this.props.id}
+                    key={i}
+                    index={i}
+                    enumKey={enumKey}
+                    label={this.props.enumAttribute.formatter.format(enumKey)}
+                    checkedState={checkedState}
+                    onUpdate={this.onUpdateHandle}
+                    disabled={this.isReadOnly()}
+                    widgetId={this.props.id}
                 />
             );
         }
     }
 
     private renderAsText(): boolean {
-        return this.props.enumAttribute.readOnly && this.props.readOnlyStyle=="text"; 
+        return this.props.enumAttribute.readOnly && this.props.readOnlyStyle == "text";
     }
 
     private isReadOnly(): boolean {
diff --git a/src/package.xml b/src/package.xml
index 9b078dd..6949eaa 100644
--- a/src/package.xml
+++ b/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="MultiSelectEnum" version="1.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="MultiSelectEnum" version="1.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="MultiSelectEnum.xml"/>
         </widgetFiles>