[sapl-demo-playground] Switching between examples isn't correctly updating the not visible tab

[nniikkoollaaii]

When you're showing the "AuthorizationSubscription"-Tab and switching from Example "Basic" to "Spring Security" the Policy Editor and the AuthorizationSubscription-Editor are getting instantly updated correctly from the server side.

Code here ff .

But when clicking the previous not visible "Mocks"-Tab, it's still showing the "old" mock definition from the previous example. Only after clicking inside the sapl-editor-for-vaadin component "json-editor" the content is beeing updated.

You can recreate this behaviour on https://playground.sapl.io

[nniikkoollaaii]

Hi @Nipahu , could you please provide some help here?

I'm calling the JsonEditor.setDocument() methods (via UI.access() or not) but when the Editor isn't currently visibile, it's document is only getting updated after it's made visibile and clicked inside.

This isn't the case if I'm using a simple TextField instead of the JsonEditor-Component. So I'm suspecting there is something not working correctly with how you're updating the CodeMirror after the setDocument()-method is called.

[Nipahu]

Hi @nniikkoollaaii I will take a look at this this weekend. I suspect it's missing the editor reference when it's invisible.

[Nipahu]

The problem arises as CodeMirror doesn't update properly while being hidden. An update can be triggered by calling the refresh method of the CodeMirror editor and it seems to work well. But I haven't found an event that is fired when the tab page is activated and the editor is made invisible again. Neither a dom event nor a vaadin event. If you or anyone else has an idea about this I'd be glad to incorperate it into the editor. For now I added a refresh method for the JSONEditor that can called when the tab is activated to force the editor to update which can be used as following:

tabs.addSelectedChangeListener(event -> {
    tabsToPages.values().forEach(page -> page.setVisible(false));
    Component selectedTab = tabs.getSelectedTab();
    Component selectedPage = tabsToPages.get(selectedTab);
    if(selectedTab.equals(tab2MockInput)) {
        mockDefinitionEditor.Refresh();
    }
    selectedPage.setVisible(true);
});

This way the editors display the correct text even without the need to click into them.

[nniikkoollaaii]

I don't have an idea to automatically detect this, too.

In my opinion the refresh() method approach is fine! Can confirm it's working!

Thank you very much for your help!