Edited block does not save: TypeError: Cannot read properties of null (reading 'classList')

Created on 8 October 2024, about 1 month ago

Problem/Motivation

I got edit_plus enabled,
I can click (ckeditor5 textfield) content to activate the wysiwyg in place editor where I can make changes to the content. But when I click outside of the content so it tries to save, or when I click the actual save button, the modified content is not saved. Instead, I get the following js error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList')
    at Module.updateTempstore (entity-form.js:217:24)
    at InlineEditor.blurElement (inline-editor.js:78:20)
    at InlineEditor.blur (field-plugin-base.js:114:17)
    at HTMLDocument.watchFocus (field-plugin-base.js:94:14)

Steps to reproduce

I hope the explanation above or attached video is enough info for how to reproduce

Proposed resolution

No idea yet.

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡§πŸ‡ͺBelgium flyke

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

Comments & Activities

  • Issue created by @flyke
  • πŸ‡ΊπŸ‡ΈUnited States Tim Bozeman

    Hmm... If I look at entity-form.js:217 I see that it's calling pageElementWrapper.classList.add('disabled-updating');. So, without editing if I just look at the markup of the page I should see markup that looks like this.

    <div data-edit-plus-field-value-wrapper="node::2::field_summary::value" class="clearfix text-formatted field field--name-field-summary field--type-text-long field--label-hidden field__item">
      <div class="edit-plus-field-value" data-edit-plus-id="node::2::field_summary::0::en::full::text_long::text_default::value" data-edit-plus-page-element-id="node::2::field_summary::0::value" data-once="EditPlusDisabled">
        <p>Scrumptious vegan chocolate brownies that are rich, fudgy, and nutty. These delights have a surprise hint of coconut making them the perfect indulgence. Serve warm with a little vanilla dairy-free ice cream!</p>
      </div>
    </div>
    

    That markup is important as it allows the editor to relate the elements in the rendered page to the form items in the hidden entity form in the sidebar. The error is looking for data-edit-plus-field-value-wrapper in your markup which is added in edit_plus_preprocess_field. Are you overriding that field template? If so, could you pass along the attributes so the markup is more like what core ships with?

  • πŸ‡§πŸ‡ͺBelgium flyke

    I added a dpm() inside edit_plus.module first to make sure that it reached that code and added the whole edit_plus_wrapper.
    Screenshot 1 is dpm output for the textfield element I'm trying to change. it confirms that it does indeed reach that code and adds the edit_plus_wrapper.
    The rest of the screenshots is to show that trhoughout the whole process, data-edit-plus-field-value-wrapper attribute is in fact present.

  • πŸ‡§πŸ‡ͺBelgium flyke

    EditableElement.getPageElementWrapper() returns null, not sure yet why.
    I added some output.

  • πŸ‡§πŸ‡ͺBelgium flyke

    In comparison, the actual value of data-edit-plus-field-value-wrapper is:
    block_content::54e7d573-bf17-40b1-bcad-2cca8ffb85bb::label::block_property
    The ID that getPageElementWrapper() in editable-element.js is looking for is:
    block_content::54e7d573-bf17-40b1-bcad-2cca8ffb85bb::text_body::value

    So now its up to check why these two dont match.

  • πŸ‡§πŸ‡ͺBelgium flyke

    You were spot on from the beginning: Our custom theme did have a field.html.twig override.
    I removed that and all is working, so it was indeed caused by our custom theme.

Production build 0.71.5 2024