1.12 GridField relation editor JavaScript error

[liefra]

Affected Version

phpunit/phpunit            9.5.27 The PHP Unit Testing framework.
silverstripe-themes/simple 3.2.1  The SilverStripe simple theme (default SilverStripe 3 theme)
silverstripe/login-forms   4.8.0  A collection of templates for the CMS login screens
silverstripe/recipe-cms    4.12.0 SilverStripe recipe for fully featured page and asset content editing
silverstripe/recipe-plugin 1.7.0  Helper plugin to install SilverStripe recipes

Description

When using a GridFieldConfig_RelationEditor in combination with a GridField there is a JavaScript error when the relationship search and link field in the CMS.

The search request itself gets executed correctly and there is a 200 response.
For instance the request http://localhost:8000/admin/pages/edit/EditForm/7/field/Categories/search?gridfield_relationsearch=tr returns the response [{"label":"Travel","value":"Travel","id":1}]

But the dropdown of the relationEditor never appears and the spinner keeps spinning.

In the console there is the following error:

vendor.js?m=1670898567:1 Uncaught TypeError: r.getClientRects is not a function
    at e.fn.init.offset (vendor.js?m=1670898567:1:807306)
    at Object.getWithinInfo (vendor.js?m=1670898567:1:2263439)
    at t.fn.position (vendor.js?m=1670898567:1:2263710)
    at e.fn.position (vendor.js?m=1670898567:1:2268466)
    at e.<computed>.<computed>._suggest (vendor.js?m=1670898567:1:2352878)
    at e.<computed>.<computed>._suggest (vendor.js?m=1670898567:1:2253949)
    at e.<computed>.<computed>.__response (vendor.js?m=1670898567:1:2352181)
    at e.<computed>.<computed>.__response (vendor.js?m=1670898567:1:2253949)
    at e.<computed>.<computed>.o (vendor.js?m=1670898567:1:2253833)
    at e.<computed>.<computed>.__response (vendor.js?m=1670898567:1:2354345)

Steps to Reproduce

1. Use the source code of the SilverStripe many_many lesson available at: https://github.com/silverstripe/silverstripe-lessons-v4/tree/master/Lesson-10-end/app/src
2. In ArticlePage.php replace the CheckboxSetField with a GridFieldConfig_RelationEditor

//        $fields->addFieldToTab('Root.Categories', CheckboxSetField::create(
//            'Categories',
//            'Selected categories',
//            $this->Parent()->Categories()->map('ID','Title')
//        ));

$conf = GridFieldConfig_RelationEditor::create(10);
$fields->addFieldToTab('Root.Categories', new GridField('Categories', 'Categories', $this->Categories(), $conf));

3. Login the CMS
4. Create sample categories
5. Create a ArticlePage and try to link a category

[kinglozzer]

Could well be related to #1423 (i.e. jQuery UI needing to be updated - #1424)

[ssmarco]

Another way of manual testing is going to Security -> Groups section. And then click either Content Authors or Administrators from the list. From there the relation editor shows up to find existing member as shown below:

[lekoala]

Yes I can confirm I have the same issue, I'm currently looking into it

[lekoala]

in the meantime.. if you have the issue, this works after leftandmain init.

    Requirements::javascript("https://code.jquery.com/jquery-migrate-3.4.0.min.js");

[sb-relaxt-at]

In case this helps someone in debugging: r is the window whereas I assume it should be some dom element. It seems as this inside the entwine function no longer points to the owning dom element. Due to the suggestion by @lekoala I assume it is related to the jQuery update.

[sb-relaxt-at]

Could well be related to #1423 (i.e. jQuery UI needing to be updated - #1424)

From my short debugging session I do agree, that seems to be the same problem.

[GuySartorelli]

@liefra silverstripe/admin 1.12.1 has been released - can you please check if that fixes this issue for you?

[liefra]

@GuySartorelli : Hi, I have upgraded two projects to silverstripe/admin 1.12.1 and for both the error is gone and linking records work again as expected. Thanks a lot

[GuySartorelli]

Awesome. Closing this issue then.