IsValidated not working with redux

[zivkaziv]

Hi,

I'm opening a new issue on that.

My steps are using redux and implementing isValidated() as mentioned in the documents. The problem: IsValidated method isn't called.

I've debug it a little bit and found in the method "stepMoveAllowed" it get ProxyComponent and not the step itself, so isValidted doesn't exist on this path.

[aehaake]

Hi running into the same issue..

[rubystar]

Hey i am having the same problem. Anybody has a fix for this? Thanks

[newbreedofgeek]

Yes, I suspect the higher order redux wrapper is abstracting the steps further. I had the same issue after integrating react-validation-mixin and had to write conditional checks whenever I was binding properties to the react components. Has someone been able to get this working? I'd like to get StepZilla working with redux.

[newbreedofgeek]

@zeel if you have some time would appreciated if you can try and reproduce this with redux and see if you can fix it. I'd really like to resolve this if it's an issue, as redux is probably what most ppl use for state.

[magnifi]

It would be great to provide a way to validate high order components, or probably accept a callback as prop.

<StepZilla
     shouldProceed={(index, component) => this.validateStep(index)} />

I ended up exporting the component with the option {withRef: true}, and calling component.getWrappedInstance().isValidated()

https://github.com/magnifi/react-stepzilla/commit/eb3687e639d8a58a6ddc42eb78a1b46f390080c6#diff-2770833218bd08d0b5d0c0157cfef742R315

[zeel]

@newbreedofgeek ok I will check tonight

[zeel]

@newbreedofgeek I think solution provided by @magnifi is correct.

There is another way to hoist instance method of the component to container component, but it's not approved by Facebook authors.

https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424

@magnifi can you create pull request? cc: @newbreedofgeek

[zivkaziv]

Hi, Sorry for the late response. After facing this issue, I implemented it on my own using material design stepper. For each component i've added export default connect(mapStateToProps, null, null, { withRef: true }) in order to have access to isValidated() method.

In order to execute this method you just need to call ..getWrappedInstance().isValidated()

So if I'm not mistaken, the fix should be in this part `{ key: 'stepMoveAllowed', value: function stepMoveAllowed() { var skipValidationExecution = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

  var proceed = false;

  if (this.props.dontValidate) {
    proceed = true;
  } else {
    if (skipValidationExecution) {
      // we are moving backwards in steps, in this case dont validate as it means the user is not commiting to "save"
      proceed = true;
    } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) {
      // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC,
      // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface
      proceed = this.refs.activeComponent.refs.component.isValidated();
    } else if (Object.keys(this.refs).length == 0 || typeof this.refs.activeComponent.isValidated == 'undefined') {
      // if its a form component, it should have implemeted a public isValidated class (also pure componenets wont even have refs - i.e. a empty object). If not then continue
      proceed = true;
    } else {
      // user is moving forward in steps, invoke validation as its available
      proceed = this.refs.activeComponent.isValidated();
    }
  }

  return proceed;
}`

[mdingalla]

forced the issue with this

else if(typeof this.props.steps[this.state.compState].component.type.prototype.isValidated !== 'undefined') { proceed = this.props.steps[this.state.compState].component.type.prototype.isValidated(); }

[ahmetcetin]

i had the same issue, but without using any HOC like redux, my component in step 4 was just a plain class component, somehow it was still dropping in HOC isValidated part in if statement in step 4. So I've changed the part starting with line 261 as follows to fix it:

      } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) {
        // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC,
        // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface
        if (!!this.refs.activeComponent.refs.component) {
          proceed = this.refs.activeComponent.refs.component.isValidated();
        } else {
          proceed = this.refs.activeComponent.isValidated();
        }
      } else if (

[sricheta92]

@ahmetcetin even your solution is not working. @newbreedofgeek How do I pass { withRef: true } to connect function?

[sabun123]

I think I'm experiencing this problem as well, since I'm using React with Redux. I'm passing react-stepzilla a Semantic UI Grid component, and it pops up this lovely error message:

Uncaught TypeError: Cannot read property 'isValidated' of undefined

which pretty much breaks everything.

I have not tried magnifi's suggested changes above because it would need to be repeated on each computer after setting up the project again, and that's rather tedious and error-prone in a team based project.

[miralkumbhani]

Facing the same issue with even the simple code:

<div className='step-progress' style={style}> <StepZilla steps={steps} nextButtonCls='btn btn-prev btn-primary btn-md pull-right' backButtonCls='btn btn-next btn-primary btn-md pull-left' showNavigation={true} showSteps={true} hocValidationAppliedTo={[0]} preventEnterSubmission={true} prevBtnOnLastStep={true} /> </div>

@newbreedofgeek This is a really nice and simple component for newbies like me to use. So, it would be really appreciated if a solution is provided to this issue.

[jcsabado]

React-redux now is in version ^5.0.7, @realdubb your edit is not working on that version or I am just doing it wrong, isValidated still not working with redux connect. Anyone?? Also your edit is not yet reflected on stepzilla current version?

[realdubb]

@jcsabado no, my changes have not been merged to current version. Haven't had the chance to add tests before requesting PR

The fix works with react-redux ^5.0.7 - I've added a test showing it working. Check out the component in Step3b and specifically line 159 - you need component to export withRef: true otherwise it won't work https://github.com/realdubb/react-stepzilla/blob/reduxIsValidated/src/examples/Step3b.js#L159

[jcsabado]

@realdubb Thanks dude.. . I did wrong on my code hahaha I use "hocValidationAppliedTo={[0,1, 2, 3]}" then edit the main.js added these code } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) { // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC, // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface // Hack edit let { wrappedInstance } = this.refs.activeComponent if(wrappedInstance){ proceed = wrappedInstance.isValidated(); } else { proceed = this.refs.activeComponent.refs.component.isValidated(); } it's working though, can you do a test with my code and let me know your insight about it?

[AlluManikyam]

I am using redux with react step zilla , i need to validate the steps.

• I added the IsValidated function to the step.
• I also followed the above suggestions but got this error. main.js:318 Uncaught TypeError: Cannot read property 'isValidated' of undefined could please help me out of this problem

[IronTony]

So, any news about this problem? Actually I am not using isValidated(), just this:

const steps = [
  { name: 'Step 1', component: <div>Step1</div> },
  { name: 'Step 2', component: <div>Step2</div> },
];

const SteppingComponent = () => (
  <Fragment>
    <div className="step-progress">
      <StepZilla steps={steps} />
    </div>
  </Fragment>
);

I have redux installed obviously and I have the above problem.

[Khareem23]

i had the same issue, but without using any HOC like redux, my component in step 4 was just a plain class component, somehow it was still dropping in HOC isValidated part in if statement in step 4. So I've changed the part starting with line 261 as follows to fix it:

      } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) {
        // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC,
        // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface
        if (!!this.refs.activeComponent.refs.component) {
          proceed = this.refs.activeComponent.refs.component.isValidated();
        } else {
          proceed = this.refs.activeComponent.isValidated();
        }
      } else if (

I'm experiencing this as well . My Step 4 is Plain not deplaying the page content but step 5 displays . is there a configuration i've to alter . immediate response would be appreciated Please

[newbreedofgeek]

does #134 fix this?

[tristanhcole]

@newbreedofgeek As far as I'm aware, your fix still doesn't cover when passing a HOC (e.g. redux connected) as a step.

I'm still getting Uncaught TypeError: Cannot read property 'isValidated' of undefined

[hamed-farag]

Any updates regarding this issue, I have the same issue when I use withTranslation HOC (react-i18next)