Component null parameter

[ngonzalezpazFC]

When accessing the demo, a javascript error sign shows up saying "(TypeError): $0 is null" in firefox or "(TypeError): Cannot read property 'allowDuplicates' of null" in chrome.
The console logs this error:
The error has occurred in the JS code: '$0, $1, (function _appendChipWithoutEvent() { if ($0.allowDuplicates) { $0.push('items', $1); } else if ($0.items.indexOf($1) == -1) { $0.push('items', $1); } $0.required = false; $0.autoValidate = false; $0._value = ''; }) ()'

I could not find where that method is, but after testing the demo I found that the error occurs when the "DisabledDemo" is available at the same time that any of these two other demos is available too: "RestrictedDemo", "DataProviderDemo". With the "BinderDemo" or only the "DisabledDemo" available, the error does not show up.

[ngonzalezpazFC]

Blocks https://github.com/FlowingCode/AddonsDemoV14/issues/32

[javier-godoy]

What are the steps to reproduce it? I've just tested the demo in master branch and it works as eexpected.

[ngonzalezpazFC]

I tried it in the branch commons-demo-2.1.0
Maybe the error is related to the implementation of commons-demo, because that is the difference between the master and commons-demo-2.1.0 branches

[javier-godoy]

This looks similar to FlowingCode/OrgChartAddon#37

The demos in master create new instances of the component every time a new tab is selected:

layout.removeAll();
layout.addToPrimary(new DataProviderDemo());

On the other hand, commons-demo create instances when the page is loaded, and then reattach them when needed.

I wouldn't say commons-demo is wrong, but it is a different pattern of use, which happens to trigger this issue.

[ngonzalezpazFC]

Do you have any suggestion on how to solve this?

[javier-godoy]

Just to be clear, I this looks similar but I'm not sure if it's actually the same case. Can you please provide a standalone example like that of FlowingCode/OrgChartAddon#37?

[ngonzalezpazFC]

Yes:

  Tabs tabs = new Tabs();
  Tab tab1 = new Tab("Tab one");
  Tab tab2 = new Tab("Tab two");
    
  ChipField<String> chf2 = new ChipField<>("Select some planets (Restricted input, allowed pattern [a-zA-Z])");
  chf2.setWidthFull();
  chf2.setAvailableItems(Arrays.asList("Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"));
  chf2.setAllowedPattern("[a-zA-Z]");
  chf2.setClosable(true);

  ChipField<String> chf = new ChipField<>("Disabled", "Mercury", "Venus", "Earth");
  chf.setWidthFull();
  chf.addSelectedItem("Mercury");
  chf.addSelectedItem("Venus");
  chf.setDisabled(true);

  tabs.addSelectedChangeListener(l -> {
    if (l.getSelectedTab().equals(tab1)) {
      add(chf2);
    } else {
      add(chf);
    }
  });
  tabs.add(tab1, tab2);
  add(tabs);

This code adds an instance of the previously created object every time the tab selection changes

[javier-godoy]

I'm closing this issue since I cannot reproduce it with version 2.4.3-SNAPSHOT. Feel free to reopen if it isn't the case.