From f7ace5e16defed0692424a22faa3b703905f3836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yulia=20=C4=8Cech?=
 <6585477+yuliacech@users.noreply.github.com>
Date: Sat, 19 Dec 2020 01:53:09 +0100
Subject: [PATCH] [Rollup Jobs] Added autofocus to cron editor (#86324)

---
 .../public/components/cron_editor/cron_editor.tsx            | 2 ++
 .../crud_app/sections/job_create/steps/step_logistics.js     | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx b/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx
index 72e2f51c37e4c..19af93b67aca0 100644
--- a/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx
+++ b/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.tsx
@@ -67,6 +67,7 @@ interface Props {
     fieldToPreferredValueMap: FieldToValueMap;
     frequency: Frequency;
   }) => void;
+  autoFocus?: boolean;
 }
 
 type State = FieldToValueMap;
@@ -234,6 +235,7 @@ export class CronEditor extends Component<Props, State> {
           fullWidth
         >
           <EuiSelect
+            autoFocus={this.props.autoFocus}
             options={excludeBlockListedFrequencies(UNITS, frequencyBlockList)}
             value={frequency}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
index 5e9c2f62ceef8..bb217fbeed304 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
@@ -45,8 +45,10 @@ export class StepLogistics extends Component {
     hasMatchingIndices: PropTypes.bool.isRequired,
     indexPatternAsyncErrors: PropTypes.array,
   };
+  state = { cronFocus: false };
 
   showAdvancedCron = () => {
+    this.setState({ cronFocus: true });
     const { onFieldsChange } = this.props;
 
     onFieldsChange({
@@ -55,6 +57,7 @@ export class StepLogistics extends Component {
   };
 
   hideAdvancedCron = () => {
+    this.setState({ cronFocus: true });
     const { onFieldsChange, fields } = this.props;
     const { simpleRollupCron } = fields;
 
@@ -156,6 +159,7 @@ export class StepLogistics extends Component {
             fullWidth
           >
             <EuiFieldText
+              autoFocus={this.state.cronFocus}
               value={rollupCron}
               onChange={(e) => onFieldsChange({ rollupCron: e.target.value })}
               isInvalid={Boolean(areStepErrorsVisible && errorRollupCron)}
@@ -181,6 +185,7 @@ export class StepLogistics extends Component {
     return (
       <Fragment>
         <CronEditor
+          autoFocus={this.state.cronFocus}
           fieldToPreferredValueMap={fieldToPreferredValueMap}
           cronExpression={rollupCron}
           frequency={cronFrequency}