[Rollup Jobs] Added autofocus to cron editor (#86324)

yuliacech · cjcenizal · commit 406f850fa877 · 2020-12-18T16:54:59.000-08:00
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
@@ -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
@@ -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}

Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,7 @@ interface Props {`
`67`	`67`	`fieldToPreferredValueMap: FieldToValueMap;`
`68`	`68`	`frequency: Frequency;`
`69`	`69`	`}) => void;`
	`70`	`+ autoFocus?: boolean;`
`70`	`71`	`}`
`71`	`72`
`72`	`73`	`type State = FieldToValueMap;`
`@@ -234,6 +235,7 @@ export class CronEditor extends Component<Props, State> {`
`234`	`235`	`fullWidth`
`235`	`236`	`>`
`236`	`237`	`<EuiSelect`
	`238`	`+ autoFocus={this.props.autoFocus}`
`237`	`239`	`options={excludeBlockListedFrequencies(UNITS, frequencyBlockList)}`
`238`	`240`	`value={frequency}`
`239`	`241`	`onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>`