Modal with validation errors block another modal to show content

[filip-minarik]

Bug description
In the screen, I have multiple modals. The first modal is triggered by the "Create Client" button (it displays a form for creating/editing a client). The next modal for editing a client is triggered as an action on a record in a table row.

After clicking "Add Client," I fill in the details for the new client and submit. If the server returns validation errors, I close the modal without saving using the "Close" button, clicking outside the modal, or the close icon in the corner.

Then, I click the "Edit Client" action on a table row, but instead of showing me the modal with the retrieved data, it displays the modal from the "Create Client" action with error messages.

The modals for creating and editing a client have the same form, only the methods for saving and retrieving data differ.

The issue is caused by /orchid/platform/resources/js/controller/modal_controller.js, which in the open method checks if the modal contains elements with the CSS class .invalid-feedback. If it does, the data is not asynchronously loaded (asyncLoadData).

To Reproduce

1. In command bar in table layout add action create (modal toggle)
2. Create table with records and add column with action edit (modal toggle)
3. Both modals for edit & create have same form (content)
4. Click on create button
5. Fill modal with worng data & submit, you retrieve errors from server
6. Close modal for create
7. In table row click on button edit, which show modal. Modal show content from action create and dont run asyncLoadData from server

Expected behavior
If different modals share the same layout as content but have different links for asynchronously fetching data and saving, I would expect the modal content to be displayed according to the respective link for asynchronous data retrieval and saving.

One possible solution would be to create a modal hash based on parameters, or after closing the modal, return the modal to its original state without errors.

Screenshots
- detail screen
- click create client & fill data & apply
- after close modal create client + try to click on edit client
- loaded modal - edit client with data & errors from create client modal
- normal edit .... create modal with error was not triggered before

Desktop (please complete the following information):

• OS: Ubuntu 22.04.3 LTS
• Browser Chrome / Firefox
• Version newest

Server (please complete the following information):

• Platfrom Version: 14.15
• Laravel Version: 10.32
• PHP Version: 8.1.27
• Database: Mysql
• Database Version: >5.6 (doesn't matter)

[filip-minarik]

I found another error in orchid modals, that the events defined in modal_controller.js in the connect method, specifically:
this.element.addEventListener('shown.bs.modal', this.show);
this.element.addEventListener('hide.bs.modal', this.hidden);

Perhaps due to the fact that Bootstrap modal uses jQuery.

[appiusattaprobus]

Validation errors prevent update data. Possible solution is removing errors after close modal window.

document.addEventListener('hidden.bs.modal', function (event) {
    event.target.querySelectorAll(".invalid-feedback").forEach(e => e.remove());
});