Fix focus jumps from Case description box back to Alerts table with first <return> keystroke (#111273)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Pablo Machado 2021-09-09 10:35:47 +02:00 committed by GitHub
parent ec461a223e
commit db07147091
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 1 deletions

View file

@ -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';

View file

@ -21,6 +21,7 @@ const TitleComponent: React.FC<Props> = ({ isLoading }) => (
idAria: 'caseTitle',
'data-test-subj': 'caseTitle',
euiFieldProps: {
autoFocus: true,
fullWidth: true,
disabled: isLoading,
},