Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

[clavaud]

Describe the bug When adding a Form with CollaborationBind, at runtime, it popup an TypeError. It seems that the vaadin-field-highlighter.js is not loaded... and highlight of fields is not running...

If I put an CollaborationAvatarGroup on the page, it's displayed.

    String userId = (String) VaadinSession.getCurrent().getAttribute(USER_ID_ATTRIBUTE);
    String userNickname = (String) VaadinSession.getCurrent().getAttribute(NICKNAME_ATTRIBUTE);
    this.userInfo = new UserInfo(userId, userNickname);
    this.binder = new CollaborationBinder<>(entityType, userInfo);

 ((CollaborationBinder) binder).setTopic(entityType.getSimpleName() + "/" + entry.getId(), () -> entry);
      ((CollaborationBinder<TrainingDTO>) binder).setSerializer(Map.class, JSONValue::toJSONString, s -> (Map)JSONValue.parse(s));
    binder.forField(codeField).asRequired().bind("code");
    binder
        .forField(nameField)
        .asRequired()
        .bind("name");

    binder.forField(
        descriptionField).bind("description");

    binder.forField(trainingTrlField).bind("translations");

Screenshots

Versions

• Vaadin version: 14.7.0.rc1
• Collaboration Engine version: 3.1.0
• Java version: 16
• OS version: MacOS
• Browser version (if applicable): Any
• Application Server (if applicable): Tomcat (Spring)
• IDE (if applicable): Intellij

[clavaud]

I've found something... Seems to be related to : binder.forField(trainingTrlField).bind("translations");

Where trainingTrlField is a custom field

public abstract class DefaultCustomListFieldForTranslationV2<C extends EntityTranslationV2>
    extends FlexBoxLayout
    implements HasValue<CustomListFieldValueChangeEventForTranslationV2<C>, Map<String, C>>,
        HasLogger,
        Serializable {}

And translations is : private Map<String, TrainingTrlDTO> translations = new HashMap<>();

As part of the main entity bind to the collaborative binder.

[clavaud]

More info... The problem comes from the CustomField.

In the static initFieldObserver(field) method, the field is seen as a Div (field = div {align: '', title: '', lang: '', translate: true, dir: '', …}), then it'll do a result = new FieldObserver(field) and because it has no shadowRoot, it will fail and generate an exception...

initTags(component) {
    const tags = document.createElement('vaadin-user-tags');
    component.shadowRoot.appendChild(tags);
    ...
}

[clavaud]

In fact, the custom field was a FlexLayout (which implements HasValue). If I replaced by a Crud then it works.

[heruan]

Thanks @clavaud for the additional details! Seems like the custom field breaks the highlighting somehow, we're looking into it.

[heruan]

@clavaud I was able to replicate the broken field-highlighting on basic fields when using a custom field (notice that custom fields per se don't have field-highlighting, but of course having a custom field shouldn't break the highlighting of others).

Did you try to bump your dependencies to the newly released Vaadin 14.7.0 and also CE 3.1.1? With the new platform release I cannot replicate the issue anymore.

[jhapy]

Dear, I'll try and let you know. Best regards. Alexandre

[heruan]

@clavaud / @jhapy are you still experiencing this with latest versions or can this be closed?

[heruan]

I'm closing this since we're not able to reproduce it with the current versions, feel free to reopen if you're still experiencing issues with this!