Skip to content

Bard: dropdown menu of a newly inserted set closes immediately (can't delete/collapse/duplicate the set) #15704

Closed

Description

@ruegler

Bug description

After inserting a new set into a Bard field, the set's "…" dropdown (Collapse / Duplicate / Delete Set) does not open. Clicking the trigger does nothing visible. The same happens for dropdowns inside the set, e.g. the row actions of a Grid field within the set.

Sets that were already saved are not affected. Their dropdown opens normally, even when expanded or after their fields were edited. Once the entry is saved and reloaded, the dropdown of the previously "new" set works again.

Expected: the dropdown opens and the set can be deleted right after inserting it.

What I found while debugging:

  • The set's dropdown is a modal Reka dropdown (DropdownMenuRootContext.modal === true).
  • Clicking the trigger sets open to true. The menu content is mounted into body and removed again in the same tick.
  • At that moment aria-hidden / data-aria-hidden get set on the editor's top-level children (h1, p, h2, … inside .ProseMirror), apparently from the modal "hide others" behaviour.
  • ProseMirror's DOMObserver registers these attribute mutations as DOM changes and marks the range dirty. DOMObserver.flush() → view.updateState() → docView.updateChildren() → destroyRest() then destroys the set's node view. No transaction is dispatched.
  • The Vue component of the set (including the open dropdown) is unmounted and a fresh instance is rendered with the dropdown closed.

So the modal dropdown mutates attributes inside the ProseMirror DOM, ProseMirror re-renders that range, and the re-render destroys the node view that owns the dropdown. For saved sets the node view seems to survive the re-render, which is why only freshly inserted sets are affected.

How to reproduce

  1. Create a Bard field with a set containing a Grid (any fields will do), e.g.:

    handle: text
    field:
      type: bard
      sets:
        main:
          sets:
            buttons:
              fields:
                -
                  handle: buttons
                  field:
                    type: grid
                    min_rows: 1
                    fields:
                      - { handle: label, field: { type: text } }
                      - { handle: link, field: { type: link } }
  2. Open an entry with this field in the CP.

  3. Place the cursor on an empty line in the Bard field and insert the set.

  4. Click the "…" button in the header of the newly inserted set.

  5. The dropdown does not open, so the set can't be deleted, collapsed or duplicated.

  6. Save and reload the entry, then click "…" again. Now the dropdown opens.

Logs

Environment

Environment
Laravel Version: 13.38.0
PHP Version: 8.5.12
Composer Version: 2.10.3
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: Europe/Berlin
Locale: de

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: CACHED
Views: CACHED

Drivers
Broadcasting: null
Cache: file
Database: sqlite
Logs: debug / single
Mail: sendmail
Queue: sync
Session: file

Storage
public/storage: LINKED

Statamic
Addons: 5
License Key: Not set
Sites: 5 (German, English (US), English, Hungary, Spanish)
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.36.0 PRO

Statamic Addons
heidkaemper/statamic-toolbar: 1.7.0
jacksleight/statamic-bard-texstyle: 4.2.4
ndx/statamic-bard-color-picker: 3.1.0
ndx/statamic-simple-redirects: 1.4.0
spatie/statamic-responsive-images: 6.2.0

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions