fix: make textarea visible before TinyMCE init on edit#878
Open
Deftunk wants to merge 1 commit into
Open
Conversation
When clicking on a question/measure body that already has content (answer.length > 0), `hideTextarea` is true and the underlying textarea has `display: none !important` from the .hide CSS class. TinyMCE 8 + autoresize plugin fails silently when initialized on a hidden element: the editor iframe is created but stays at height 0 and the rendered <div> is also hidden because `editor` is now set, leaving the user with an empty-looking section. This affects every imported PIA/structure (every answer is pre-filled, so every textarea is hidden), and also re-edits of fields already written in the app. Fix: in `questionContentFocusIn` / `measureContentFocusIn`, set `hideTextarea = false` to make the textarea visible, then defer `loadEditor()` to the next tick so Angular has time to apply the class change before TinyMCE attaches. Applied to both structure and pia modules, for both questions and measures.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When clicking on the body of a question or measure that already has content (
answer.length > 0), the editor opens visually empty: the rendered<div>is hidden (becauseeditorbecomes truthy) and the TinyMCE iframe stays invisible.Result: the user thinks their content has been wiped, even though the data is preserved in IndexedDB.
This happens every time an imported structure or PIA is edited — every answer is pre-filled at import, so every textarea has
hideTextarea = true.Root cause
In
ngOnInit, the component sets:The textarea then has the
.hideCSS class, which isdisplay: none !importantinstyles.scss.When the user clicks to edit,
loadEditor()callstinymce.init({ selector: '#' + elementId })on a textarea that isdisplay: none. TinyMCE 8 + theautoresizeplugin fails silently in this case: the iframe is created but its height stays at 0 because layout calculations on a hidden ancestor return 0.The user sees nothing — and clicking elsewhere triggers
focusout, which writes the (empty) editor content back to the form, although in practice the existing answer is preserved on next display becausegetContent()returns whatever the editor parsed at init.Fix
In
questionContentFocusInandmeasureContentFocusIn, sethideTextarea = falseso the textarea is visible before TinyMCE attaches, and deferloadEditor()to the next macrotask so Angular has time to apply the class change to the DOM:Scope
Applied to all 4 components that use the same pattern:
src/app/modules/structure/content/questions/questions.component.tssrc/app/modules/structure/content/measures/measures.component.tssrc/app/modules/pia/content/questions/questions.component.tssrc/app/modules/pia/content/measures/measures.component.tsTotal: +10 / -2 lines.
How to reproduce (before the fix)
After the fix
The textarea becomes visible before TinyMCE initializes; the editor renders correctly with the existing content.