@centreon/ui 25.4.1 → 25.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.4.1",
+  "version": "25.4.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/Inputs/Grid.tsx

@@ -4,6 +4,7 @@ import { InputPropsWithoutGroup } from './models';
 
 import { Box, Typography } from '@mui/material';
 import { FormikValues, useFormikContext } from 'formik';
+import { isNotEmpty, isNotNil } from 'ramda';
 import { getInput } from '.';
 
 interface StylesProps {
@@ -47,12 +48,17 @@ const Grid = ({
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
+        const key =
+          isNotNil(field.label) || isNotEmpty(field.label)
+            ? field.label
+            : field.additionalLabel;
+
         if (field.hideInput?.(values) ?? false) {
           return null;
         }
 
         return (
-          <Box sx={{ width: '100%' }} key={field.fieldName}>
+          <Box sx={{ width: '100%' }} key={key}>
             {field.additionalLabel && (
               <Typography
                 sx={{ marginBottom: 0.5, color: 'primary.main' }}

package/src/Form/Inputs/index.tsx

@@ -20,6 +20,8 @@ import {
   groupBy,
   isEmpty,
   isNil,
+  isNotEmpty,
+  isNotNil,
   keys,
   last,
   not,
@@ -204,7 +206,6 @@ const Inputs = ({
           : ({} as Group);
 
         const hasGroupDivider = !groups[index]?.isDividerHidden;
-
         const isFirstElement = areGroupsOpen || equals(index, 0);
 
         return (
@@ -219,22 +220,19 @@ const Inputs = ({
               >
                 <div className={classes.inputs}>
                   {groupedInputs.map((inputProps) => {
+                    const key =
+                      isNotNil(inputProps.label) || isNotEmpty(inputProps.label)
+                        ? inputProps.label
+                        : inputProps.additionalLabel;
+
                     if (isLoading) {
-                      return (
-                        <LoadingSkeleton
-                          input={inputProps}
-                          key={inputProps.label}
-                        />
-                      );
+                      return <LoadingSkeleton input={inputProps} key={key} />;
                     }
 
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div
-                        className={classes.inputWrapper}
-                        key={inputProps.label}
-                      >
+                      <div className={classes.inputWrapper} key={key}>
                         {inputProps.additionalLabel && (
                           <Typography
                             className={cx(