Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stepper: onChange function doesn't work #6475

Closed
espezaliate opened this issue Apr 25, 2024 · 7 comments · Fixed by #6486
Closed

Stepper: onChange function doesn't work #6475

espezaliate opened this issue Apr 25, 2024 · 7 comments · Fixed by #6486
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@espezaliate
Copy link
Contributor

Describe the bug

The onChange function doesn't do anything. Also would be nice to have access to total steps and maybe last, previous, next.

Reproducer

https://stackblitz.com/edit/rp5vx5?file=src%2FApp.tsx

PrimeReact version

10.6.3

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

@espezaliate espezaliate added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 25, 2024
@Rekl0w
Copy link
Contributor

Rekl0w commented Apr 26, 2024

In the code, buttons manually controlling the navigation between steps using the nextCallback and prevCallback methods. These methods do not trigger the onChange event.

If you want to execute some code when the step changes, you could do this within the onClick handlers of your "Next" and "Back" buttons.

<Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => { stepperRef.current.nextCallback(); console.log('Step changed to: ' + (stepperRef.current.state.activeIndex + 1)); }} />

@espezaliate
Copy link
Contributor Author

espezaliate commented Apr 26, 2024

I'm referencing this part of the stepper api documentation:
Stepper API

@espezaliate
Copy link
Contributor Author

In the code, buttons manually controlling the navigation between steps using the nextCallback and prevCallback methods. These methods do not trigger the onChange event.

If you want to execute some code when the step changes, you could do this within the onClick handlers of your "Next" and "Back" buttons.

<Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => { stepperRef.current.nextCallback(); console.log('Step changed to: ' + (stepperRef.current.state.activeIndex + 1)); }} />

also, I'm unable to access state through the ref, the only available functions it reveals are next previous and get element

@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Apr 26, 2024
melloware added a commit to melloware/primereact that referenced this issue Apr 26, 2024
@melloware
Copy link
Member

Submitted a PR to add getActiveStep() and setActiveStep(step) to the ref.

@melloware melloware self-assigned this Apr 26, 2024
@melloware melloware added this to the 10.6.4 milestone Apr 26, 2024
@ivaneliasoo
Copy link

Hi, I'm facing this issue too, and I believe that problem is the event name so it must be wrong in documentation ("onChange") or in code ("onChangeStep") , so using "onChangeStep" works correctly but with type errors
image
but no event info is returned, only index info
image

@melloware
Copy link
Member

@ivaneliasoo I just fixed it for next release: #6546

@rahulAnand1999
Copy link

rahulAnand1999 commented Jun 21, 2024

how to stop navigation from the header @Rekl0w

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants