HiDeoo / intro.js-react

Intro.js react wrapper
MIT License
407 stars 58 forks source link

Previous button not visible when there is only one step in tutorial #103

Closed disha1202 closed 1 year ago

disha1202 commented 1 year ago

Describe the bug

Previous button not visible when there is only one step in tutorial

Screenshot from 2023-03-02 12-09-44

Works fine in case of multiple steps

Screenshot from 2023-03-02 12-15-55

To Reproduce

     `<Steps
          enabled={true}
                      steps={tutorialSteps(this.props.pathname, this.props.intl)}
          options={{
            "nextLabel": this.props.intl.formatMessage({ id: NEXT_SHORT }),
            "prevLabel": this.props.intl.formatMessage({ id: PREV }),
            "exitOnOverlayClick": false,
                            "nextToDone": false,
            "showBullets": false,
            "tooltipClass": 'customTooltip',
            "hidePrev": false
          }}
          initialStep= {0}
          onExit= {() => {this.props.unmount();
            console.log(tutorialSteps(this.props.pathname, this.props.intl))
          }}
        />`

Expected behavior

The prev button should be visible in case there is only one step

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

HiDeoo commented 1 year ago

Thanks for your report. Unfortunately, this seems to be a behavior hardcoded in intro.js itself:

https://github.com/usablica/intro.js/blob/81f8efbf984f12cece9a5c48cff0a63e2c6d9428/src/core/showElement.js#L457-L460

Maybe this could be workaround by adding a fake step that is never shown to the user, or something like that but I guess the proper way would be to have an option for this directly in intro.js.