Handle enter button in PF4 wizard

Author: rvsia

packages/pf4-component-mapper/src/form-fields/wizard/wizard.js

@@ -7,6 +7,7 @@ import './wizard-styles.scss';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import flattenDeep from 'lodash/flattenDeep';
+import { selectNext } from './step-buttons';
 
 const DYNAMIC_WIZARD_TYPES = [ 'function', 'object' ];
 
@@ -246,6 +247,29 @@ class Wizard extends React.Component {
         <div className={ `pf-c-wizard ${inModal ? '' : 'no-shadow'} ${isCompactNav ? 'pf-m-compact-nav' : ''} ${setFullWidth ? 'pf-m-full-width' : ''} ${setFullHeight ? 'pf-m-full-height' : ''}` }
           role="dialog"
           aria-modal={ inModal ? 'true' : undefined }
+          onKeyDown={ e => {
+            if (e.key === 'Enter'){
+              const isNotButton = e.target.type !== 'button';
+
+              if (isNotButton) {
+                e.preventDefault();
+
+                const schemaNextStep = this.findCurrentStep(this.state.activeStep).nextStep;
+                const hasCustomButtons = this.findCurrentStep(this.state.activeStep).buttons;
+
+                let nextStep;
+                if (schemaNextStep) {
+                  nextStep = selectNext(schemaNextStep, formOptions.getState);
+                }
+
+                if (formOptions.valid && nextStep && !hasCustomButtons) {
+                  this.handleNext(nextStep, formOptions.getRegisteredFields);
+                } else if (formOptions.valid && !schemaNextStep && !hasCustomButtons) {
+                  handleSubmit();
+                }
+              }
+            }
+          } }
         >
           { title && <WizardHeader
             title={ title }
@@ -284,6 +308,7 @@ Wizard.propTypes = {
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func,
     getRegisteredFields: PropTypes.func.isRequired,
+    valid: PropTypes.bool.isRequired,
   }),
   fields: PropTypes.arrayOf(PropTypes.shape({
     stepKey: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired,