Fix SelectWithInput styles and functionality

* Adapts styles for CSS modules
* Add name to errors
* Properly sends validity

components/common/SelectWithInput/index.module.scss

@@ -1,29 +1,16 @@
-.SelectWithItem {
+.set {
-  .InputSet {
+  display: flex;
-    display: flex;
+  flex-direction: row;
-    flex-direction: row;
+  gap: $unit;
-    gap: $unit;
+  width: 100%;
-    width: 100%;
+}
 
-    .SelectTrigger {
+.errors {
-      flex-grow: 1;
+  color: $error;
-      width: 100%;
+  display: none;
-    }
+  padding: $unit 0;
 
-    .Input {
+  &.visible {
-      flex-grow: 0;
+    display: block;
-      text-align: right;
-      width: 13rem;
-    }
-  }
-
-  .errors {
-    color: $error;
-    display: none;
-    padding: $unit 0;
-
-    &.visible {
-      display: block;
-    }
   }
 }

components/common/SelectWithInput/index.tsx

@@ -59,13 +59,13 @@ const SelectWithInput = ({
 
   // Classes
   const inputClasses = classNames({
-    Bound: true,
+    fullHeight: true,
-    Hidden: currentItemSkill?.id === 0,
+    range: true,
   })
 
   const errorClasses = classNames({
-    errors: true,
+    [styles.errors]: true,
-    visible: error !== '',
+    [styles.visible]: error !== '',
   })
 
   // Hooks
@@ -127,18 +127,24 @@ const SelectWithInput = ({
     let error = ''
 
     if (currentItemSkill) {
-      if (value < currentItemSkill.minValue) {
+      if (!currentItemSkill.fractional && value && value % 1 != 0) {
+        error = t(`${object}.errors.value_not_whole`, {
+          name: currentItemSkill.name[locale],
+        })
+      } else if (value < currentItemSkill.minValue) {
         error = t(`${object}.errors.value_too_low`, {
+          name: currentItemSkill.name[locale],
           minValue: currentItemSkill.minValue,
         })
       } else if (value > currentItemSkill.maxValue) {
         error = t(`${object}.errors.value_too_high`, {
+          name: currentItemSkill.name[locale],
           maxValue: currentItemSkill.maxValue,
         })
-      } else if (!currentItemSkill.fractional && value % 1 != 0) {
-        error = t(`${object}.errors.value_not_whole`)
       } else if (!value || value <= 0) {
-        error = t(`${object}.errors.value_empty`)
+        error = t(`${object}.errors.value_empty`, {
+          name: currentItemSkill.name[locale],
+        })
       } else {
         error = ''
       }
@@ -146,7 +152,13 @@ const SelectWithInput = ({
 
     setError(error)
 
-    return error.length === 0
+    if (error.length > 0) {
+      sendValidity(false)
+      return false
+    } else {
+      sendValidity(true)
+      return true
+    }
   }
 
   const rangeString = () => {
@@ -162,17 +174,19 @@ const SelectWithInput = ({
   }
 
   return (
-    <div className="SelectWithItem">
+    <div>
-      <div className="InputSet">
+      <div className={styles.set}>
         <Select
           key={`${currentItemSkill?.name.en}_type`}
           value={`${currentItemSkill ? currentItemSkill.id : 0}`}
           open={open}
+          trigger={{
+            className: 'grow',
+          }}
           disabled={selectDisabled}
           onValueChange={handleSelectChange}
           onOpenChange={changeOpen}
           onClose={onClose}
-          triggerClass="modal"
           overlayVisible={false}
         >
           {generateOptions()}
@@ -181,13 +195,16 @@ const SelectWithInput = ({
         <Input
           value={fieldInputValue}
           className={inputClasses}
+          fieldsetClassName={classNames({
+            hidden: currentItemSkill?.id === 0,
+          })}
+          wrapperClassName="fullHeight"
           type="number"
           placeholder={rangeString()}
           min={currentItemSkill?.minValue}
           max={currentItemSkill?.maxValue}
           step="1"
           onChange={handleInputChange}
-          visible={currentItemSkill ? 'true' : 'false'}
           ref={input}
         />
       </div>