redux-form/redux-form

Next button disabled on wizard form after coming back from next page and hitting reload on the browser

Open

#4,460 opened on 2019年5月15日

GitHub で見る
 (0 comments) (0 reactions) (0 assignees)JavaScript (12,592 stars) (1,683 forks)batch import
Version 8bughelp wanted

説明

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

Wizard form with redux-persist SessionStorage. Filling out page one of the form with correct values and then filling out the second page with wrong values or no values triggers validation errors and the 'Submit' button disabled on the second page, then hitting the 'Back' button will return us to page one which will have the 'Next' button disabled also. Re-loading the page on the browser won't correct the issue, page one will keep the 'Next' button disabled because of the validation errors that happened on page number two.

What is the expected behavior?

Validation errors on page number two of the wizard form should NOT affect the 'Next' button on page number one. 'Next' button on page number one should be enabled.

Steps to reproduce bug:

1.- Fill out all fields on page one, 'password' and 'confirm password' fields MUST match 2.- On page # 2, click on all the fields but leave them empty or type in incorrect values to cause a validation error on all fields, you should see error message in red right below the field. 3.- Hit re-load on the browser, it should take you back to page two. 4.- Hit the 'Back' button. 5.- The 'Next' button should be disabled or if it's not, hit re-load on the browser while on page one, now the 'Next' button should be disabled.

Sandbox Link

https://codesandbox.io/embed/epic-waterfall-blybc?eslint=1&fontsize=14

What's your environment?

"react": "^16.7.0", "redux": "^4.0.1", "react-redux": "^6.0.0", "redux-form": "^8.1.0", "redux-form-validators": "^2.7.5", "redux-persist": "^5.10.0", "redux-persist-transform-filter": "0.0.18", "connected-react-router": "^6.3.1", "react-stepper-horizontal": "^1.0.11", "react-widgets": "^4.4.9", "react-widgets-moment": "^4.0.25", "moment": "^2.24.0", "redux-thunk": "^2.3.0" Chrome Version 72.0.3626.121 (Official Build) (64-bit), NodeJS v8.12.0

Other information

コントリビューターガイド

技術スタック
javascriptreact
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
ReactReduxredux form
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
50
調査方針
The issue involves a wizard form where validation errors on page two persist and disable the 'Next' button on page one after navigating back. The sandbox link (https://codesandbox.io/embed/epic waterfall blybc) provides a minimal reproduction. To fix, examine redux form's form state management, specifically how validation errors are stored per field and how they interact with the wizard's page state. Look at the redux form reducer and the `redux persist` configuration to understand why errors from page two affect page one after browser reload. Consider resetting validation errors for fields not on the current page when navigating back.