Contrib.social

Modal Fails to Display Content When Using "Add Above" on Re-Used Paragraphs

Open on Drupal.org →
Created on 22 February 2024, 4 months ago

Problem/Motivation

I'm encountering a problem with the "Add Above" functionality within the Paragraphs module. Specifically, when I edit an re-usable paragraph and I attempt to add a new paragraph above another paragraph through the modal interface, the "Add Above" modal opens but fails to display any content—it appears entirely empty. This issue seems to arise from the interaction of modal interfaces, where invoking a second modal from within an already active modal leads to this empty display.

Steps to reproduce

  1. Navigate to the edit page of a node containing a re-usable paragraph.
  2. Click the "Edit" option adjacent to the re-usable paragraph to open its edit form in a modal.
  3. Within this modal, click on the three dots (ellipsis) next to any paragraph and select "Add Above".
  4. Observe that a new modal window opens but does not display any content.

Proposed resolution

Make sure we can use the "Add above" functionality when editing a re-usable paragraph.

Additional info

  • There are no errors reported in the browser's console log.
  • The Drupal watchdog logs do not report any relevant errors.

Also the "Add above" does work great when creating newly paragraphs.

🐛 Bug report
Status

Active

Version

1.16

Component

Experimental Widget

Created by

🇳🇱Netherlands interactivex

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @interactivex
  • Comment 4 months ago →
    🇳🇴Norway svenryen

    I did some testing. This bug doesn't show with the Seven theme. The site in question uses Claro.

    The problem is that somehow the buttons that should be available in the "Add [paragraph]" or "Add above" buttons gets an inline style of display:none.

    We arrive at this situation when there's a Reusable paragraph that contains a list of paragraphs.

  • Comment 4 months ago →
    🇳🇴Norway svenryen

    As a non-ideal workaround, you can paste this command into the browser console:

    jQuery('.paragraphs-add-dialog input').show(). After running this, the "Add above" choice works.

    Maybe this can help nail down the bug and come up with a patch.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024