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

elastic · Dec 19, 2020 · f7ace5e · f7ace5e
1 parent 94b4945
commit f7ace5e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
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}