Commit 04b5ffcf authored by Oliver Bartsch's avatar Oliver Bartsch
Browse files

[BUGFIX] Observe GridEditor visibility to refresh codeMirror

In case a TCA field with renderType=belayoutwizard
is configured to be not in the initially visible tab, the
CodeMirror editor remains empty, when switching to
the tab, containing the editor. The reason is, CodeMirror
needs to be refreshed, after becoming visible.

Therefore, the GridEditor, holding the configuration,
is now observed, if not initially visible. As soon as it
becomes visible, the CodeMirror instance - if any -
is refreshed.

Can be tested with `tx_styleguide_elements_basic.text_20`.

Resolves: #96062
Releases: master, 11.5
Change-Id: Ic03c315e8f12bc2f3623fdb11a1782d5c1081a23
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/72277

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Jochen's avatarJochen <rothjochen@gmail.com>
Tested-by: Nikita Hovratov's avatarNikita Hovratov <nikita.h@live.de>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Jochen's avatarJochen <rothjochen@gmail.com>
Reviewed-by: Nikita Hovratov's avatarNikita Hovratov <nikita.h@live.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
parent 709deb86
......@@ -95,6 +95,7 @@ export class GridEditor {
this.targetElement = $(this.selectorEditor);
this.initializeEvents();
this.addVisibilityObserver($element.get(0));
this.drawTable();
this.writeConfig(this.export2LayoutRecord());
}
......@@ -920,4 +921,24 @@ export class GridEditor {
result += '\t}\n}\n';
return result;
}
/**
* Observe the editors' visibility, since codeMirror needs to be refreshed as soon as it becomes
* visible in the viewport. Otherwise, if this element is not in the first visible FormEngine tab,
* it will not display any value, unless the grid gets manually updated.
*/
protected addVisibilityObserver(gridEditor: HTMLElement) {
if (gridEditor.offsetParent !== null) {
// In case the editor is already visible, we don't have to add the observer
return;
}
new IntersectionObserver((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
entries.forEach(entry => {
const codemirror: any = document.querySelector(this.selectorCodeMirror);
if (entry.intersectionRatio > 0 && codemirror) {
codemirror.CodeMirror.refresh();
}
});
}).observe(gridEditor);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment