Dialog box functionality is broken when there are multiple dialog boxes on one page.
On my site, we have a sidebar element which shows/hides different sections of the page. If there is a footnote in more than one of these sections, when a footnote link is clicked in the text, the dialog does not appear. This is because the javascript is only selecting the first dialog box on the page, and since the dialog box is currently hidden, it causes a UI problem.
I was able to adjust the javascript to make it work with multiple dialog boxes. I'm not sure exactly how many parent levels up from the footnote link would be possible, so I am iterating a few levels up until the child dialog box can be found. The code should still work even if there is only one dialog box on the page.
Might want to check if there is a better solution for doing this.
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
scott_euser commentedHi thanks for raising this
There shouldn't be multiple dialogs on the page though. You can have multiple citations clicked from anywhere on the page, and the latest click should replace the contents within the dialog. You should never see two dialog's at the same time, so there is no need for more than one. Perhaps there is a different bug in the dialog JS.
The dialog is also btw an ID, which HTML validation says should only have one of
In the method FootnotesFilter::process() there is $this->footnotesDialog->setOutputted(); which is attempting to prevent multiple dialogs from appearing on the page, maybe something is going wrong there.
Hope that helps you further debug
Comment #3
scott_euser commentedComment #4
bcushing commentedHi Scott, appreciate your reply. I didn't see a notification when you replied so apologies for the delay getting back to you. I installed the latest update of this module and I am still seeing the issue. I should have mentioned in my initial post that I am using the paragraphs module. When multiple paragraphs are on one page, each with their own text area field with a footnote, each paragraph contains a js-footnotes-dialog HTML block with the same #js-footnotes-dialog ID.
In my case, only one of the paragraphs is visible at a time on the page. So when the first paragraph is hidden, the first js-footnotes-dialog block is hidden as well. So if you click a footnote link inside the second, visible paragraph, it attempts to show the first js-footnotes-dialog which is hidden, thus causing an issue. My patch works around this issue by finding the js-footnotes-dialog which lives inside the same paragraph as the footnote link being clicked, instead of trying to show the first js-footnotes-dialog which is within the page HTML.
I suppose a better way to address this would be to create only one js-footnotes-dialog somewhere outside the paragraph HTML, so it wouldn't be hidden when the paragraph itself is hidden. Either that or use unique IDs within each paragraph and have the system open the js-footnotes-dialog which is within the same paragraph.
Comment #6
scott_euser commentedThanks for the update; I also missed that you had pushed code (created a merge request for that now). Will take a closer look, thanks!
Comment #8
scott_euser commentedFixed test coverage (was missing library dependencies), merged. Thank you!