Skip to content

Fix(Forms): Defer MarkdownEditor initialization in collapsed sections and hidden containers - #20314

Closed
hamdyelbatal122 wants to merge 2 commits into
filamentphp:5.xfrom
hamdyelbatal122:fix/issue-20313-markdown-editor-collapsed
Closed

Fix(Forms): Defer MarkdownEditor initialization in collapsed sections and hidden containers#20314
hamdyelbatal122 wants to merge 2 commits into
filamentphp:5.xfrom
hamdyelbatal122:fix/issue-20313-markdown-editor-collapsed

Conversation

@hamdyelbatal122

Copy link
Copy Markdown
Contributor

Fixes #20313

Cause

When a MarkdownEditor component is placed inside a collapsed Section or an inactive tab/container, EasyMDE (CodeMirror 5) eagerly attempts to measure character coordinates while the element has no rendered DOM dimensions (visibility: hidden or height: 0). This triggers TypeError: Cannot read properties of null (reading 'top') or TypeError: Cannot read properties of undefined (reading 'map').

Solution

  1. Deferred Initialization: Refactored markdownEditorFormComponent to inspect container visibility on init(). If the editor starts inside a hidden/collapsed container, EasyMDE instantiation is deferred until the section is expanded and revealed via ResizeObserver.
  2. Init Hook Protection: Added a safe CodeMirror.defineInitHook in markdown-editor.js to prevent unhandled selection measurement errors on zero-rect elements before refresh() runs.

@hamdyelbatal122
hamdyelbatal122 force-pushed the fix/issue-20313-markdown-editor-collapsed branch 2 times, most recently from 1495b26 to 9512447 Compare August 1, 2026 04:11
@hamdyelbatal122
hamdyelbatal122 changed the base branch from 4.x to 5.x August 1, 2026 04:11
@hamdyelbatal122

Copy link
Copy Markdown
Contributor Author

Updated the PR to fix the issue across all collapsed containers (Repeater, Section, Tabs, Accordion, Modal, etc.):

  • Dynamic Visibility Checking: Updated isEditorVisible() to walk up parent elements in the DOM tree, inspecting Alpine component collapse states (isCollapsed, isOpen, etc.), [x-cloak], [hidden], and CSS styles instead of relying on specific class names.
  • Focus & Click Guards: Added focus and mousedown listeners on CodeMirror to ensure cm.refresh() is triggered synchronously if character metrics are uninitialized prior to selection.
  • Post-Expand Reflow Refresh: Scheduled cm.refresh() after expand/reveal transitions complete via double requestAnimationFrame and delayed setTimeout.
  • CodeMirror Safety Hook: Wrapped prepareSelection in CodeMirror.defineInitHook to catch any unbuilt line maps safely and trigger a refresh instead of throwing unhandled TypeErrors.

@outatime-io

Copy link
Copy Markdown

I tested the fix in my reproduction repo and can confirm it's working as expected.

https://github.com/outatime-io/filament-collapsed-markdown-editor-reproduction

@danharrin danharrin added bug Something isn't working pending review labels Aug 4, 2026
@danharrin danharrin added this to the v4 milestone Aug 4, 2026
@danharrin

Copy link
Copy Markdown
Member

#20320 fixes all problems at the root cause

@danharrin danharrin closed this Aug 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Uncaught TypeError: Cannot read properties of undefined (reading 'map') on markdown-editor.js

3 participants