[4.0] Form field type "modal_article" does not close modal properly

[PhocaCz]

Steps to reproduce the issue

When using form field type "modal_article" e.g. in config.xml, it does not close modal window properly after selecting article. Backgroud (modal backgrop) does not allow to continue in work.

TEST INSTRUCTIONS: we can use e.g. Contact component to demonstrate this issue:

Open following file:
administrator/components/com_contact/config.xml

Change line 4 FROM:

<fieldset
		name="contact"
		label="COM_CONTACT_FIELD_CONFIG_INDIVIDUAL_CONTACT_DISPLAY"
		description="COM_CONTACT_FIELD_CONFIG_INDIVIDUAL_CONTACT_DESC"
		>

TO:

<fieldset
		name="contact"
		label="COM_CONTACT_FIELD_CONFIG_INDIVIDUAL_CONTACT_DISPLAY"
		description="COM_CONTACT_FIELD_CONFIG_INDIVIDUAL_CONTACT_DESC"
        addfieldprefix="Joomla\Component\Content\Administrator\Field"
		>

And below this fieldset add some dummy parameter:

<field name="dummy_parameter" type="modal_article" select="true" new="true" edit="true" clear="true" class="form-control" label="Dummy Parameter" />

Save and try to add article in Contact Parameters:

1. when you close the window with CLOSE button, everything is OK
2. when you close the window with selecting article, modal background (modal backdrop) will be not closed. See animated GIF:

EDIT: Try to enable and disable debug mode when testing, this can produce different behaviour: #36169 (comment)

Expected result

Like in Joomla 3, when selecting article, modal will be properly closed.

Actual result

Modal is not closed when selecting article,

System information (as much as possible)

Joomla 4.0.4

[PhocaCz]

The behaviour is similar when new article is created and "Save and Close" button is clicked.

[brianteeman]

I remember seeing that before. Sorry I dont remember the exact fix but it should not be possible to close the modal by clicking on the background layer

[brianteeman]

perhaps this #35624

[PhocaCz]

I remember seeing that before. Sorry I dont remember the exact fix but it should not be possible to close the modal by clicking on the background layer

Then it will work the same way like in Menu Manager (for "Create" button):

• when you click "Select", you can close modal with clicking on background
• when you click "Create", you cannot close modal with clicking on background

Which is still better than freezing screen.

[PhocaCz]

perhaps this #35624

It looks like, it is not the same case, because there is "data-bs-backdrop" included yet

For example for "Create" button which even does not close the window:

[PhocaCz]

The problem is, two backdrop boxes are opened and one is closed:

It can be seen even on the background which is much darker (2x background)

So the problem is, some process makes the background twice, but only closes one when clicked.

And what is interesting:

Select button creates two backdrops and both are closed with Close button
Create button creates two backdrops and only one is closed with Close button

I don't know the function in details but it seems like the first button cares about all backdrops but the second only about one.

The Close button created by Create button does not include "dat-bs-dismiss":

Chaning from:
<button type="button" class="btn btn-secondary" onclick="window.processModalEdit(this, 'jform_dummy_parameter', 'add', 'article', 'cancel', 'item-form'); return false;" >Close</button>
to:
<button type="button" class="btn btn-secondary" onclick="window.processModalEdit(this, 'jform_dummy_parameter', 'add', 'article', 'cancel', 'item-form'); return false;" data-bs-dismiss="modal">Close</button>

can solve the problem for this part, but the part with selecting article title is still unresolved as applying "dada-bs-dissmiss" on URL link in iframe does not work.

[PhocaCz]

Hmmm, this is very interesting. When I enable debug mode, which means not minified Javascript libraries, it works well:

[PhocaCz]

This is the problematic part:

It works with:

media/vendor/bootstrap/js/modal.js ✅

But does not work with:
media/vendor/bootstrap/js/modal.min.js ❌

The difference is, the first one creates only one instance of:

<div class="modal-backdrop fade show"></div>

The second creates two instances

Joomla 4.0.4 stable package.
The same with: Joomla_4.0.5-rc2-dev-Development-Full_Package.zip - Nightly Build Wednesday, 01 December 2021 03:00:04 UTC

[richard67]

Closing as having a pull request. Please test #36178 . Thanks in advance.