Fix focus jumps from Case description box back to Alerts table with f…

…irst <return> keystroke (#111273) (#111691) Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Pablo Machado <[email protected]>
elastic · Sep 9, 2021 · e584d54 · e584d54
1 parent 7051a5e
commit e584d54
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/x-pack/plugins/cases/public/components/create/form_context.tsx b/x-pack/plugins/cases/public/components/create/form_context.tsx
@@ -113,7 +113,20 @@ export const FormContext: React.FC<Props> = ({
         : null,
     [children, connectors, isLoadingConnectors]
   );
-  return <Form form={form}>{childrenWithExtraProp}</Form>;
+  return (
+    <Form
+      onKeyDown={(e: KeyboardEvent) => {
+        // It avoids the focus scaping from the flyout when enter is pressed.
+        // https://github.com/elastic/kibana/issues/111120
+        if (e.key === 'Enter') {
+          e.stopPropagation();
+        }
+      }}
+      form={form}
+    >
+      {childrenWithExtraProp}
+    </Form>
+  );
 };
 
 FormContext.displayName = 'FormContext';
diff --git a/x-pack/plugins/cases/public/components/create/title.tsx b/x-pack/plugins/cases/public/components/create/title.tsx
@@ -21,6 +21,7 @@ const TitleComponent: React.FC<Props> = ({ isLoading }) => (
       idAria: 'caseTitle',
       'data-test-subj': 'caseTitle',
       euiFieldProps: {
+        autoFocus: true,
         fullWidth: true,
         disabled: isLoading,
       },