No Code Attached Yet bug
avatar umiha
umiha
22 Nov 2022

Description of the bug

When using Joomla Custom field type Editor with Editor-None, Codemirror, then Joomla editor-xtd buttons are not working. When I click on any of buttons (except Read More) they are not working. For example if I click Media the screen gets grey transparent overlay but modal window doesn't show up.
Additional information - on main tab Content those xtd buttons works. They only not working on Joomla Custom fields.

Steps to reproduce the issue

  1. Joomla 4x
  2. Create Joomla Custom field (type Editor), and assign it to All categories
  3. Open some new or existing Article, then go to tab "Fields"
  4. Find previously created custom field, and click on Joomla editor-xtd buttons bellow text area
  5. You will see that modal windows is not opening, and you can not do anything with those buttons

Expected result

When clicking on Joomla editor-xtd buttons then modal window popup should show up so you can choose for example to insert Article (link), Media (image), Menu (link), etc.

Actual result

You will see that modal windows is not opening, and you can not do anything with those buttons

Screenshot

screen shot 2022-11-22 at 12 04 29

System information (as much as possible)

My Desktop
OS: macOS Monterey
Browser: Chrome ver. 107, but same in Firefox and Safari

CMS
Joomla 4.2.5
Linux server
PHP 7.4

avatar umiha umiha - open - 22 Nov 2022
avatar umiha umiha - change - 22 Nov 2022
Labels Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 22 Nov 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 22 Nov 2022
avatar brianteeman
brianteeman - comment - 22 Nov 2022

Please check your browser console for any javascript errors

avatar umiha
umiha - comment - 22 Nov 2022

Hi, I checked, but there is no javascript errors in the browser console.
Also on Network tab of browser developer tools I don't see any request with 404 status.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39277.

avatar brianteeman
brianteeman - comment - 22 Nov 2022

Confirmed

avatar richard67 richard67 - change - 22 Nov 2022
Labels Added: bug
avatar richard67 richard67 - labeled - 22 Nov 2022
avatar dgrammatiko
dgrammatiko - comment - 22 Nov 2022

There should be an older issue for this one (edit: #37297) but anyways I will try to explain what is happening, what is actually wrong in the Joomla codebase and the 3 possible ways to fix this. The default editor is rendered in the first tab of the article edit form. In that tab also ALL the modals are rendered (echoed from PHP if you prefer). The tab Fields that has the second instance of the editor has ONLY the buttons (bellow the none/codemirror). The problem (is not unique to this case, it also happens in the toolbar and other places where the modal could be under a hidden div/section/etc) is that the modal when it's being called will never appear because one of the parent elements has a display:none, it is hidden, so you only get the backdrop. Great stuff!

How to solve it? There are some nasty hacks and some nice ways (you pick your poison):

  • Use JS to move the modal to the end of the document. This is hacky, it is complicated and prone to bugs and it's what Joomla is doing at the moment for the toolbar buttons that open a modal, ie:
    window.addEventListener('DOMContentLoaded', () => {
    const versionsModal = document.getElementById('versionsModal');
    if (versionsModal) {
    document.body.appendChild(versionsModal);
    }
    });
  • Resurrect my PR: #37330 which adds a simple mechanism to enqueue chinks of HTML that should be rendered at the end of the body. This is completely B/C, it requires minimal changes and it's clean, the dev decides where to render the modal.
  • Cancel the Bootstrap Modal altogether, because it's (almost) 2023 and all browsers support the native DIALOG element. This, depending how it would be implemented, might have 0 to major B/C breaks.

Pick your poison...

avatar OctavianC
OctavianC - comment - 23 Nov 2022

I think I found a 4th one, please see #39287 :)

avatar dgrammatiko
dgrammatiko - comment - 23 Nov 2022

I think I found a 4th one, please see #39287 :)

@OctavianC that would work but also explodes the number of elements in a page (in other words it won't scale, so also tinyMCE is wrong in that case. Probably I'm the one to be blamed there)

avatar OctavianC
OctavianC - comment - 23 Nov 2022

I agree, but on the other hand, I don't think you'll stumble upon that many editor instances on a single page...

avatar umiha
umiha - comment - 23 Nov 2022

Hi, just to mention, there can be variable number of editors on a single page on article, when using custom fields.
You can have some fixed number of custom fields type Editor,
and also variable number of editors when using editors within Subform field with repeatable option.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39277.

avatar richard67 richard67 - change - 23 Nov 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-11-23 22:46:52
Closed_By richard67
avatar richard67 richard67 - close - 23 Nov 2022
avatar richard67
richard67 - comment - 23 Nov 2022

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

avatar umiha
umiha - comment - 24 Nov 2022

I have tested this, #39287 and #39295, and both works for me. Great job!


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39277.

Add a Comment

Login with GitHub to post a comment