vue-good-wizard icon indicating copy to clipboard operation
vue-good-wizard copied to clipboard

disableNext doesn't actually disable anything by default

Open Spacarar opened this issue 4 years ago • 0 comments

I am using VGW 1.4.1 and maybe this is intended, but the nextDisabled property doesn't actually stop the button from being pressed.

To reproduce here is a minimal example

<template>
  <div>
    <vue-good-wizard name="fakeTour" :steps="steps">
      <div slot="companyInfo">
        company based content
      </div>
      <div slot="teamInfo">
        team based content
      </div>
      <div slot="userInfo">
        user based content
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
export default {
  computed: {
    steps () { // this will be dynamic based on other data properties, so that's why it's computed here
      return [
        {
          label: 'Company Information',
          slot: 'companyInfo',
          options: {
            nextDisabled: true
          }
        },
        {
          label: 'Teams',
          slot: 'teamInfo'
        },
        {
          label: 'Users',
          slot: 'userInfo'
        }
      ]
    }
  }

}
</script>

On the first screen you can see that the next button appears to be disabled and shows a disabled cursor when hovered, but you can still click the button and it will still take you to the next screen. I understand this could be worked around with a custom onNext function, but it seems like the button functionality should actually be disabled if it is visibly disabled.

Regardless of the issue, thanks for maintaining such a useful library, and please ignore the style changes I've made on the screenshot.

Screen Shot 2020-10-28 at 11 09 08 AM Screen Shot 2020-10-28 at 11 09 12 AM

Spacarar avatar Oct 28 '20 17:10 Spacarar