palantir/blueprint

[MultistepDialog] Navigation to later steps is allowed via side navigation when `nextButtonProps` disallows it

Open

#4871 aperta il 20 ago 2021

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)TypeScript (2167 fork)batch import
P2Package: coreType: bughelp wanted

Metriche repository

Star
 (20.263 star)
Metriche merge PR
 (Merge medio 43g 10h) (27 PR mergiate in 30 g)

Descrizione

Environment

  • Package version(s): @blueprintjs/core@3.48.0

Code Sandbox

https://codesandbox.io/s/blueprint-sandbox-multistepdialog-4di0d

Steps to reproduce

(Using the example in the Code Sandbox)

  1. Advance through each step of the <MultistepDialog> to the end.
  2. See how each step must be "valid" before you can progress.
  3. Before submitting, go back to an earlier step via the "Back" buttons or via the side navigation.
  4. Uncheck the checkbox to make the step invalid.
  5. ✅ See that the "Next" button on the step is now disabled (according to nextButtonProps on that step)
  6. ❌ See that you can still navigate to the next step via the side navigation, as it was previously visited.

Actual behavior

image

Expected behavior

image

If the "Next" button of the current <DialogStep> is disabled through the nextButtonProps, I do not expect to be able to navigate further forwards through the steps via the side navigation; even if I have advanced further previously.

Guida contributor

Direzione di ricerca
Analizza la logica di navigazione dei passaggi in MultistepDialog, probabilmente in packages/core/src/components/dialog/multistepDialog.tsx. I clic sulla navigazione laterale probabilmente chiamano un gestore come handleStepClick che avanza i passaggi senza verificare se nextButtonProps è disabilitato. Modifica questo gestore per controllare nextButtonProps.disabled del passaggio corrente prima di consentire la navigazione in avanti. Assicurati inoltre che la validità del passaggio (ad esempio, lo stato della casella di controllo) venga rivalutata durante la navigazione tramite il pannello laterale. Fai riferimento al CodeSandbox per i passaggi di riproduzione e il comportamento previsto.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ReactTypeScriptBlueprint UI Toolkit
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70