Skip to content

[BUGFIX] Preserve original case in editable text - #140

Draft
Kanti wants to merge 7 commits into
mainfrom
fix/preserve-editable-text-case
Draft

Kanti wants to merge 7 commits into
mainfrom
fix/preserve-editable-text-case

Conversation

@Kanti

@Kanti Kanti commented Oct 5, 2026 •

Copy link
Copy Markdown
Contributor

Editing text styled with text-transform could store the rendered case instead of the original value. For example, editing Straße beneath an uppercase heading could save STRASSE and count the transformed text against the field’s maximum length.

Show the raw text while editing using .slot:focus and a synchronous .slot.editing class. Keep that class active until blur finishes reading, validating, and storing the text, then restore the frontend’s case transformation. Cancel pending caret work when the slot has lost focus and compare unfocused store changes against the raw value model. This removes the DOM-reading helper and its temporary inline-style mutations.

Keep the Playwright test setup and run real component regressions in CI through ./Build/Scripts/runTests.sh -s playwright. The runner uses the pinned official Playwright container with Docker or Podman, preserving host node_modules; the local npm run test:browser alternative remains available after composer install. Browser checks load the actual component and store with TYPO3’s translation helper and bundled Lit directly from Composer-installed dependencies. The copied fixture and npm Lit dependency are removed. Separate CI jobs resolve and test TYPO3 13 and 14, including each version’s actual browser dependencies. The container command installs missing Composer dependencies automatically.

Validation: ESLint, 73 Node tests, and 20 browser regressions passed locally. Browser coverage includes inherited uppercase/lowercase/capitalize, inline editors, Unicode, multiline/whitespace handling, immediate focus/blur, focus callback races, store/save/reset synchronization, style mutations, and real selections. Negative controls independently reproduced failures when removing the blur styling, focus callback guard, or raw-model comparison.

Refs #132.

const isFocused = this.matches(':focus-within');
if (!isFocused && storedValue?.trim() !== slot?.innerText?.trim()) {
// Unfocused innerText may be case-transformed; compare the raw model instead.
if (!isFocused && storedValue?.trim() !== this.value.trim()) {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potential Bug because we do not use the live value here.
Need to test this really good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant