Merge pull request #2234 from dbeaver/CB-4393-cannot-validate-the-select-during-form-submission

CB-4393 fix: Cannot validate the select during form submission

webapp/packages/core-blocks/src/FormControls/Combobox.m.css

@@ -125,3 +125,11 @@
     }
   }
 }
+
+.validationInput {
+  z-index: -1;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

webapp/packages/core-blocks/src/FormControls/Combobox.tsx

@@ -62,6 +62,7 @@ interface ComboboxType {
   <TValue, TKey extends keyof TState, TState>(props: ObjectProps<TValue, TKey, TState>): JSX.Element;
 }
 
+{/* TODO rewrite whole component to select attribute instead of input type text so it has an okay form validation */}
 export const Combobox: ComboboxType = observer(function Combobox({
   value: controlledValue,
   defaultValue,
@@ -263,6 +264,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
         </FieldLabel>
       )}
       <div className={s(styles, { inputBox: true })}>
+        <input className={s(styles, { validationInput: true })} value={inputValue} required={rest.required} />
         {(icon || loading) && (
           <div className={s(styles, { inputIcon: true })}>
             {loading ? (
@@ -276,6 +278,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
         )}
         <input
           ref={setInputRef}
+          required={rest.required}
           autoComplete="off"
           name={name}
           title={title}