TypeError: Cannot read properties of undefined (reading 'toLowerCase') in keyboard handler

Question

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? All browsers (Chrome, Safari, Firefox, Edge) Reproducible demo link https://jsfiddle.net/saeedhbi/tdsLa6qe/ Describe the bug How to reproduce the bug? Create a basic GrapeJS editor (version 0.22.11 or 0.22.14) Add an input field component to the canvas Focus the input field Dispatch a KeyboardEvent where event.key is undefined for IME composition events (mostly in Chinese/Japanese/Korean keyboards)...

saeedhbi · Accepted Answer

Hi @artf, After digging deeper into the full stack trace, I found that the error is not in GrapesJS. The event.key.toLowerCase() call is coming from our own application code — a global window.addEventListener("keydown", ...) handler that we have elsewhere in our codebase, which runs alongside GrapesJS. Since our webpack build bundles multiple modules into the same chunk (dist/1348), The Sentry frame was misleading, and we incorrectly attributed the source to GrapesJS. GrapesJS's own keyboard ha...

artf · Answer

Hey @saeedhbi, where exactly do you see event.key.toLowerCase() in our code? Are you sure is not coming from your side? Unfortunately, the jsfiddle is not helpful, seems too much AI slopped 😅, it's not even loading the editor. Maybe you can share the full stack trace to see where exactly this happening?

GJS Helper · Answer

The TypeError: Cannot read properties of undefined (reading 'toLowerCase') in GrapesJS's keyboard handler is a known issue that arises when certain keyboard events, particularly those from Input Method Editors (IMEs) used for languages like Chinese, Japanese, or Korean, are dispatched from input fields within the GrapesJS canvas. The root cause is that during IME composition, the event.key property can legitimately be undefined for keydown events before a character is committed. GrapesJS's inte...

TypeError: Cannot read properties of undefined (reading 'toLowerCase') in keyboard handler

Question

Answers (3)

Related Questions and Answers

JS error when press "s" or "w" key - Cannot read properties of undefined (reading 'indexOf')

TypeError: e.getRoot is not a function (Race condition in Style Manager)

Cannot read properties of null (reading 'hasFocus') in Canvas module

Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel

Paid Plugins That Match This Issue

Related tutorials

Ship to Production Faster: What’s New in GrapesJS Shadcn

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor

Browse Plugin Categories