fix: Set focus to Name field when adding a new Bean

Fixes: #2002

src/components/metadata/MetadataEditorModal.tsx

@@ -4,7 +4,7 @@ import './MetadataEditorModal.css';
 import { TopmostArrayTable } from './ToopmostArrayTable';
 import { StepErrorBoundary } from '@kaoto/components';
 import { useFlowsStore } from '@kaoto/store';
-import { AutoFields, AutoForm, ErrorsField } from '@kie-tools/uniforms-patternfly/dist/esm';
+import { AutoField, AutoForm, ErrorsField } from '@kie-tools/uniforms-patternfly/dist/esm';
 import {
   Modal,
   ModalVariant,
@@ -14,7 +14,7 @@ import {
   StackItem,
   Title,
 } from '@patternfly/react-core';
-import { useState } from 'react';
+import { createElement, useEffect, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
 export interface IMetadataEditorModalProps {
@@ -40,13 +40,19 @@ export function MetadataEditorModal({
   name,
   schema,
 }: IMetadataEditorModalProps) {
+  const schemaBridge = new MetadataEditorBridge(getFormSchema(), createValidator(getFormSchema()));
+  const firstInputRef = useRef<HTMLInputElement>();
   const [selected, setSelected] = useState(-1);
   const { metadata, setMetadata } = useFlowsStore(({ metadata, setMetadata }) => ({
     metadata: metadata[name] as any,
     setMetadata,
     shallow,
   }));
 
+  useEffect(() => {
+    firstInputRef.current?.focus();
+  }, [selected]);
+
   function isTopmostArray() {
     return schema.type === 'array' && schema.items;
   }
@@ -75,11 +81,6 @@ export function MetadataEditorModal({
     return metadata;
   }
 
-  function getSchemaBridge() {
-    const schemaValidator = createValidator(getFormSchema());
-    return new MetadataEditorBridge(getFormSchema(), schemaValidator);
-  }
-
   function handleChangeArrayModel(config: any) {
     setMetadata(name, config.slice());
   }
@@ -124,17 +125,31 @@ export function MetadataEditorModal({
     );
   }
 
+  function renderAutoFields(props: any = {}) {
+    return createElement(
+      'div',
+      props,
+      schemaBridge.getSubfields().map((field, index) => {
+        const props: any = { key: field, name: field };
+        if (index === 0) {
+          props.inputRef = firstInputRef;
+        }
+        return createElement(AutoField, props);
+      }),
+    );
+  }
+
   function renderDetailsForm() {
     return (
       <AutoForm
-        schema={getSchemaBridge()}
+        schema={schemaBridge}
         model={getFormModel()}
         onChangeModel={(model: any) => handleChangeDetails(model)}
         data-testid={'metadata-editor-form-' + name}
         placeholder={true}
         disabled={isFormDisabled()}
       >
-        <AutoFields />
+        {renderAutoFields()}
         <ErrorsField />
         <br />
       </AutoForm>