Description
Problem
Currently, the Dialog
component in VS Code's codebase resolves its promise and closes as soon as any button is clicked. This design makes it impossible to implement scenarios where form validation is required before closing the dialog. If a user clicks a button and the form is invalid, there is no way to prevent the dialog from closing and allow the user to correct their input.
Example
A common use case is a dialog with input fields that require validation (e.g., "Name cannot be empty"). Ideally, when the user clicks "OK", the dialog should only close if the validation passes. However, with the current implementation, the dialog always closes on button click, regardless of validation result.
Current Behavior
- The dialog's
show()
method returns a promise that resolves immediately on any button click. - There is no hook or callback to intercept the button click and perform validation before closing.
Expected Behavior
- The dialog should provide a way (e.g., a callback like
onBeforeButtonClick
) to allow consumers to run custom logic (such as validation) before the dialog is closed. - If the callback returns
false
(or a rejected promise), the dialog should remain open and allow the user to correct their input.
Suggested Solution
Add an optional onBeforeButtonClick
callback to the dialog options, which is called before resolving the dialog. Only resolve and close the dialog if this callback returns true
.
Example API:
onBeforeButtonClick?: (buttonIndex: number, values?: string[], checkboxChecked?: boolean) => boolean | Promise<boolean>;
Benefits
- Enables form validation and other pre-close logic in dialogs.
- Improves UX for all scenarios where user input needs to be checked before closing the dialog.
References
This pattern is common in many UI frameworks (e.g., Ant Design, Material UI) and is essential for robust dialog interactions.