Enhancement Request: Use Mat Dialog for Confirmation Pop-up in Form.io Form Builder

Issue Description:

I am trying to implement a confirmation pop-up before the removal of components in Form.io Form Builder. Currently, Form.io uses a flag called "alwaysConfirmComponentRemoval" to show a confirmation, but it utilizes the window.confirm modal for this purpose. I believe that using the Mat Dialog from Angular Material would provide a more modern and user-friendly experience.

I attempted to achieve this using the change event, but I encountered an issue where the element is being cleared before the Mat Dialog can be displayed.

Proposed Solution:

I suggest implementing a Mat Dialog for the confirmation pop-up when removing components in Form.io Form Builder. This would involve making the following changes:

Replace the usage of window.confirm with an Angular Material Mat Dialog to display the confirmation message.

Ensure that the component removal is only performed if the user confirms the action within the Mat Dialog.

Adjust the event handling to accommodate the asynchronous nature of the Mat Dialog.

Additional Information:

I attempted to implement this feature myself by using the change event to trigger the Mat Dialog. However, the component was removed before the dialog could be displayed. I believe that modifying the event handling logic or implementing a proper confirmation dialog would resolve this issue.

Please consider this enhancement request, as it would greatly improve the user experience and the overall quality of the Form.io Form Builder.

Thank you for your attention to this matter.

formio / angular

Enhancement Request: Use Mat Dialog for Confirmation Pop-up in Form.io Form Builder #1025