Question

Arrow keys don’t move caret inside inline editable cell in Data Grid 2 (Mendix 10.23)

0

Hi everyone 👋, I’ve run into an issue with Data Grid 2 inline editing in Mendix 10.23, and I wanted to confirm if anyone else has faced the same thing. What’s happening When a column is set to be editable (Text Box) and I start typing, the arrow keys (← / →) don’t move the cursor between characters.Instead, the focus jumps to the next column or row — as if I’m navigating the grid itself. So it’s impossible to move the text caret inside the inline text box using arrow keys. What I tried Added a JavaScript action to intercept the keydown event and call stopPropagation() / preventDefault(). Tried attaching the listener on the textbox element and at document level with capture phase enabled. The listener triggers, but the Data Grid 2 still consumes the arrow key events first. It looks like the React layer for Data Grid 2 captures these keys before the DOM-level event can be stopped. Is this a known limitation or bug?Is there a recommended approach or upcoming fix to allow normal caret movement with arrow keys inside inline editable cells?

asked 2025-10-15

albin ps

3 answers

Syman Scholze · Answer 1 · 2026-03-04

Hi albin ps,

I had a similar issue in my Mendix 10.24.1 app. In my datagrid I used a textbox and was not able to use the arrow keys to navigate through the text.

To fix this is realy simpel: Open the settings of the column where your TextBox (or TextArea) is located in and in the "Column capabilities" tab set the option "Allow row events" to "No".

This instantly fixed the problem for me and the arrow keys were working again. Please keep in mind this option is only available when the column content is set to "Custom Content", but this should be anyway the case when you are using a textbox inside this column.

Gurumoorthy J · Answer 2 · 2026-03-04

Hi albin ps

This is a known limitation of how Data Grid 2 handles keyboard input. In DG2, the arrow keys are reserved for grid-level keyboard navigation. Because inline in-cell editing is not a first‑class feature in DG2 (unlike the legacy Data Grid 1), the grid’s React keyboard handler “wins,” so ←/→ (and often ↑/↓) move focus across cells/rows instead of moving the caret inside your textbox.

you can place your text box or text area in custom content in DG2 widget and click the column to navigate to column capabilities and turn off the allow row events. click my screenshot.

I hope this helps

Gowtham Ramesh · Answer 3 · 2026-03-05

Hi,

You are not doing anything wrong here. What you are seeing is actually related to how Data Grid 2 handles keyboard navigation in Mendix.

Data Grid 2 implements its own keyboard navigation (for accessibility and grid navigation), and the arrow keys are captured by the grid itself before they reach the input control. That is why the focus jumps to the next column/row instead of moving the caret inside the textbox. Because this happens inside the React component that implements the grid, intercepting the key events with a JavaScript action usually does not work reliably.

In other words, when inline editing is enabled, Data Grid 2 still prioritizes grid navigation over text-cursor navigation, which is why the arrow keys behave this way.

At the moment there is no supported configuration in Data Grid 2 to change this behavior. The usual workarounds are:

Use Enter or mouse click to move between cells and edit the value.
Switch to editing through a separate edit form or pop-up page instead of inline editing.
If caret navigation inside text is important, use another component such as Data Grid (legacy), List View, or a custom layout for editing rows.

So in short, this is a limitation of Data Grid 2’s keyboard handling rather than an issue in your implementation. If caret movement inside inline editors is critical for your use case, it is worth raising it in the Mendix Ideas portal or checking release notes, as improvements to Data Grid 2 keyboard behavior occasionally appear in newer versions.