[5.x]: Craft JS not loading in control panel slideout

phrichards commented 6 days ago

What happened?

Description

I'm building a custom plugin and trying to render some content in a slideout with asCpScreen(). The slideout is triggered by a button that I added on to a Commerce product. The slideout works and my template renders, but there are console errors that imply that Craft's JS is not loaded.

Script to open the slideout:

document.getElementById('configure').addEventListener('click', function (e) {

    e.preventDefault();
    // Post the redirect URI to the controller action
    const slideout = new Craft.CpScreenSlideout('https://mysite.ddev.site/actions/product-configurator/default')

    // Open the slideout
    slideout.open();

    // Listen for the submit event
    slideout.on('submit', function (e) {
        window.location = window.location;
    })
});

Controller action:

public function actionIndex(): Response
 {
     $response = $this->asCpScreen()
         ->action('product-configurator/default/save')
         ->title('Configure Product')
         ->contentTemplate('product-configurator/slideout/content.twig');

     return $response;
 }

The template is currently just a {{_self}}.

The slideout opens, and I can see the cancel and save buttons at the bottom, but errors in the console:

The top error for appendBodyHtml() was there on load, the rest popped up after clicking the save button, which also caused an indefinite spinning indicator.

I can see all of Craft's JS in the sources panel, including the files where these functions are defined. Everything is fine elsewhere in the CP and on the product page, this only happens in the slideout.

Steps to reproduce

Click on the button to open the slideout panel
Check the console

Expected behavior

Craft's JS is loaded and is not blocking custom scripts from loading.

Actual behavior

Craft's JS is missing and other scripts are not loaded.

Craft CMS version

5.5.0.1

PHP version

8.2.24

Operating system and version

Linux 6.10.11-linuxkit

Database type and version

MySQL 8.0.36

Image driver and version

Imagick 3.7.0 (ImageMagick 6.9.11-60)

Installed plugins and versions

Authorize.net for Craft Commerce - 5.0.1
Avatax - 4.0.0
Azure Blob Storage - 2.1.0
CKEditor - 4.3.1
Craft Commerce - 5.2.4
Element API - 4.1.0
Feed Me - 6.5.0
Freeform - 5.6.8
Hyper - 2.1.2
ImageOptimize - 5.0.3
Imager X - 5.0.2
Imager X PDF Adapter - 1.1.0
Instant Analytics GA4 - 5.0.1
Minify - 5.0.0
Navigation - 3.0.5
Neo - 5.2.14
PayPal Checkout for Craft Commerce - 3.0.1
Position Fieldtype - 5.0.0
Postie - 5.0.7
Retour - 5.0.3
SEOmatic - 5.1.5
Sprig - 3.5.1
Stripe for Craft Commerce - 5.0.4.3
Super Dynamic Fields - 5.0.1
Super Table - 4.0.2
Table Maker - 5.0.3
Typogrify - 5.0.1
Vite - 5.0.1

phrichards commented 6 days ago

I'm actually noticing something similar when editing a matrix field. When I choose to edit the entry types the slideout opens and I am able to save it, but I can't drag fields into the field layout and I see this error in the console:

brandonkelly commented 6 days ago

You should only be passing the action into CpScreenSlideout, not the full URL to an action:

const slideout = new Craft.CpScreenSlideout('product-configurator/default');

Does that help?

phrichards commented 5 days ago

That did it! I think I tried a few variations of that with the same issue and concluded that wasn't the cause, guess I missed the one I needed. Thanks!

brandonkelly commented 5 days ago

Sweet! Did that fix the Craft.SortableCheckboxSelect error as well? If not, can you share your plugin/module code with us, along with steps to reproduce? (support@craftcms.com)

craftcms / cms