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()

magnifi@eb3687e#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.

reduxjs/react-redux#270 (comment)

@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.