Fix textarea editor unusable with percentage table height#4888
Open
rathboma wants to merge 2 commits into
Open
Fix textarea editor unusable with percentage table height#4888rathboma wants to merge 2 commits into
rathboma wants to merge 2 commits into
Conversation
…ht (#4142) Adds a failing Playwright e2e test for issue #4142. When the table height is a percentage relative to a content-sized ancestor (as in the issue's jsfiddle), clicking a cell with a textarea editor never opens a usable editor: the row-height normalisation done while opening the editor grows the page, which grows the percentage-based table height, firing a ResizeObserver redraw that tears the editor back down. The test clicks the cell and asserts a focused, typeable textarea appears. It currently fails because no editor opens.
Resize driven table redraws tear down the active cell editor. With a percentage based table height the textarea editor grows the page when it opens, which grows the table, which fires the ResizeObserver and redraws the table, destroying the editor before it can be used - the reported "text area unclickable" symptom. The ResizeTable module already skipped these redraws while a cell was being edited, but only on mobile. Extend that guard (via a new editActive helper) to all platforms so the editor survives the resize loop. The layout is refreshed normally once editing ends.
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
2 participants
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.
Summary
Fixes issue #4142 where textarea editors become unclickable and unusable when the Tabulator table height is set to a percentage value. The problem was caused by a ResizeObserver feedback loop that would tear down the editor immediately after it was opened.
Changes
ResizeTable.js: Refactored resize observer callbacks to skip table redraws while a cell is actively being edited
editActive()method for clarity and reusabilityresizeObserverandcontainerObservercallbacks to use the new method instead of the previous mobile-specific logicTest files: Added regression test suite
editor-percentage-height.html: Reproduction case matching the original issue's jsfiddle configurationeditor-percentage-height.spec.js: Playwright e2e test verifying the textarea editor opens, remains visible, stays focused, and accepts user input when the table height is a percentageImplementation Details
The root cause was that when a textarea editor opens with a percentage-based table height, the editor's content can grow the page, which grows the table container, triggering the ResizeObserver. This would fire a table redraw that immediately tears down the editor, creating a loop that left the editor unusable.
The fix prevents resize-driven redraws while editing is active. The table layout is automatically refreshed once editing ends, so no visual updates are lost. The
editActive()method provides a cleaner alternative to the previous mobile-specific condition check.https://claude.ai/code/session_01UGb71kmGbina8fQregNpLK