orchidsoftware / orchidsoftware/platform

Modal with validation errors block another modal to show content

Open
#2,801 2 comments 0 reactions 1 assignee View on GitHub

@tabuna is already working on this.

Since Feb 6, 2024.

Errors
Dominant language
PHP
Stars
4.8k
Forks
662
Avg merge
1d 9h
Merged PRs (30d)
7

Description

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
Screenshot from 2024-02-06 14-01-05 - detail screen
Screenshot from 2024-02-06 14-01-44 - click create client & fill data & apply
Screenshot from 2024-02-06 14-02-38 - after close modal create client + try to click on edit client
Screenshot from 2024-02-06 14-02-51 - loaded modal - edit client with data & errors from create client modal
Screenshot from 2024-02-06 14-03-21 - 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)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.