Merge pull request #1 from newbreedofgeek/master

new option to prevent form submission

README.md

@@ -52,6 +52,9 @@ prevBtnOnLastStep: true | false
 // dev control to disable calling and Child form component validation
 dontValidate: true | false
 
+// by default if you hit the Enter key on any element it validates the form and moves to next step if validation passes. Use this to prevent this behaviour
+preventEnterSubmission: true | false
+
 ```
 
 example options usage:
@@ -76,8 +79,10 @@ example options usage:
 - write the tests
 
 #### change log
+- 1.6.0
+  - added preventEnterSubmission option to prevent moving to next step if enter is hit
 - 1.5.0
-  - update to improve showSteps. prevent UI elements from completed rendering 
+  - update to improve showSteps. prevent UI elements from completed rendering
 - 1.4.0
   - added the option showSteps which hides the top steps if needed
 - 1.3.0

dist/main.js

@@ -99,7 +99,9 @@ var StepZilla = function (_Component) {
     key: '_handleKeyDown',
     value: function _handleKeyDown(evt) {
       if (evt.which === 13) {
-        this._next();
+        if (!this.props.preventEnterSubmission) {
+          this._next();
+        }
       }
     }
 
@@ -159,24 +161,22 @@ var StepZilla = function (_Component) {
     value: function _renderSteps() {
       var _this2 = this;
 
-      if (this.props.showSteps) {
-        return this.props.steps.map(function (s, i) {
-          return _react2.default.createElement(
-            'li',
-            { className: _this2._getClassName("progtrckr", i), onClick: _this2.jumpToStep, key: i, value: i },
-            _react2.default.createElement(
-              'em',
-              null,
-              i + 1
-            ),
-            _react2.default.createElement(
-              'span',
-              null,
-              _this2.props.steps[i].name
-            )
-          );
-        });
-      }
+      return this.props.steps.map(function (s, i) {
+        return _react2.default.createElement(
+          'li',
+          { className: _this2._getClassName("progtrckr", i), onClick: _this2.jumpToStep, key: i, value: i },
+          _react2.default.createElement(
+            'em',
+            null,
+            i + 1
+          ),
+          _react2.default.createElement(
+            'span',
+            null,
+            _this2.props.steps[i].name
+          )
+        );
+      });
     }
   }, {
     key: 'render',
@@ -194,11 +194,11 @@ var StepZilla = function (_Component) {
       return _react2.default.createElement(
         'div',
         { className: 'multi-step full-height', onKeyDown: this.handleKeyDown },
-        _react2.default.createElement(
+        this.props.showSteps ? _react2.default.createElement(
           'ol',
           { className: 'progtrckr' },
           this._renderSteps()
-        ),
+        ) : _react2.default.createElement('span', null),
         compToRender,
         _react2.default.createElement(
           'div',
@@ -233,5 +233,6 @@ StepZilla.defaultProps = {
   showNavigation: true,
   stepsNavigation: true,
   prevBtnOnLastStep: true,
-  dontValidate: false
+  dontValidate: false,
+  preventEnterSubmission: false
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stepzilla",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A react multi-step, wizard component for managing data collection via forms and sub components",
   "main": "./dist/main.js",
   "scripts": {

src/main.js

@@ -73,7 +73,9 @@ export default class StepZilla extends Component {
   // handles keydown on enter being pressed in any Child component input area. in this case it goes to the next
   _handleKeyDown(evt) {
     if (evt.which === 13) {
-      this._next()
+      if (!this.props.preventEnterSubmission) {
+        this._next();
+      }
     }
   }
 
@@ -178,5 +180,6 @@ StepZilla.defaultProps = {
   showNavigation: true,
   stepsNavigation: true,
   prevBtnOnLastStep: true,
-  dontValidate: false
+  dontValidate: false,
+  preventEnterSubmission: false
 };