Use queue for adding matrix entries

[brianjhanson]

Fixes #15980

For some background, it's important to understand what happens when a matrix field has a minEntries setting and is set to inline blocks. In that situation, when the page loads, a bit of javascript will fire off to create the block and save a draft of the current entry. If that matrix field has additional matrix fields within it, the process will be repeated down the tree via JS returned from the initial AJAX request.

Now, let's say you have a matrix field (mx1) set to inline blocks with a minEntries of 1. That field is nested within another matrix field (mx2) which has a minEntries of 2 and is also set to inline blocks.

In a perfect world, you'd end up with:

┌─mx2────────────────────────────────────────────────────────────────────────┐
│                                                                            │
│                                                                            │
│ ┌─mx1───────────────────────────────────────────────────────────────────┐  │
│ │                                                                       │  │
│ │  ┌────────────────────────────────────────────────────────────────┐   │  │
│ │  │                             blocks                             │   │  │
│ │  │                                                                │   │  │
│ │  └────────────────────────────────────────────────────────────────┘   │  │
│ │                                                                       │  │
│ └───────────────────────────────────────────────────────────────────────┘  │
│                                                                            │
│ ┌─mx1───────────────────────────────────────────────────────────────────┐  │
│ │                                                                       │  │
│ │  ┌────────────────────────────────────────────────────────────────┐   │  │
│ │  │                             blocks                             │   │  │
│ │  │                                                                │   │  │
│ │  └────────────────────────────────────────────────────────────────┘   │  │
│ │                                                                       │  │
│ └───────────────────────────────────────────────────────────────────────┘  │
│                                                                            │
└────────────────────────────────────────────────────────────────────────────┘

Unfortunately, when the page loads, the top level matrix field will execute two MatrixInput.addEntry calls for the mx2 field, one for each of the minEntries it requires. Each of those calls will return additional JS that will execute their own MatrixInput.addEntry calls to satisfy the minEntries settings of their children. All of these calls will also trigger a save-draft call on the parent entry.

The problem comes in when all these requests get jumbled up. From time to time, the draft will be saved before all the nested entries are ready which causes the nested element editor to clean them up. When that happens and another request expecting that entry to still be around rolls in, things go badly.

By moving the .addEntry calls into the queue (where save-draft already lives) the requests stay more orderly.

An infinite loop example of the new code

CleanShot.2024-11-01.at.13.48.08.mp4