I have raised the issue in github as well. here is the url for more information
https://github.com/surveyjs/survey-library/issues/6653
Following is my scenario:-
- Form designed with three pages with progress bar for navigating to different pages.
- Initial load showing form in read only mode by setting mode property to display. Noticed the page navigation is working fine.
- When user click on edit button(custom) the form mode is change to edit mode and user can enter data and submit.
- Noticed when the mode of form changed to edit mode then:-
1) The user automatically navigated back to first page. for e.g if you are on page 3 and click edit button then you get redirected to page1.
2) The page navigation does not work any more. for e.g now if click page 2, page 3 then you do not redirect to that corresponding page.
Following is JSON
Code{
"logoPosition": "right",
"pages": [
{
"name": "Personal Infomrmation",
"elements": [
{
"type": "panel",
"name": "panel1",
"elements": [
{
"type": "text",
"name": "firstName",
"title": "Enter Name"
}
]
}
],
"title": "Personal Information"
},
{
"name": "Address",
"elements": [
{
"type": "text",
"name": "address",
"title": "Enter Address"
}
],
"title": "Address"
},
{
"name": "Nationality",
"elements": [
{
"type": "text",
"name": "nationality",
"title": "Current Nationality"
}
],
"title": "Nationality"
}
],
"showProgressBar": "top",
"progressBarType": "buttons"
};
and following is the react code
Codeclass App extends Component {
constructor() {
super();
this.state = {mode: "display"};
}
render() {
const surveyModel = new Model(surveyJson);
surveyModel.mode =this.state.mode
return (<div>
<h2>current mode is {this.state.mode} !</h2>
<button onClick={() => this.changeDisplayMode("Edit")}>Edit</button>
<Survey model={surveyModel} />
</div>);
}
changeDisplayMode = (strMode) => {
this.setState({ mode: strMode });
}
}