If you have been toying around with the little demos that I have posted, you might have noticed the caret jumping at the end of the text when playing the “tutorials”. When I tried implementing a stage which only had one keystroke (forward delete), the caret always displayed at the end of the text, instead of jumping back to the original position, as I expected.
Nothing looked wrong in the code, so I started implementing code to work around it. I didn’t lose too much time on this, I saw pretty quickly that it was a fools errand which would introduce a lot of complexity. I had to understand what was going wrong.
I had already given up, and was writing this work log to tell you about my frustration, but as I was writing this it occurred to me that the caret might be changing its position because its content is also changing. And this was right! When you change the value of a textfield via javascript, the caret will move to the end of the updated text value. So my objects looked something like this:
{ "_timestamp": 1726226054029, "selectionStart": 0, "selectionEnd": 0, "scrollTop": 0, "scrollLeft": 0, "value": "☹︎← delete" },
The caret position was unset because the value changed after the position was set. By changing value position within the object I got to set the caret position after the value change, which fixed the problem:
{ "_timestamp": 1726226054029, "value": "☹︎← delete", "selectionStart": 0, "selectionEnd": 0, "scrollTop": 0, "scrollLeft": 0 },
So this pretty much sums today’s work, and I’m satisfied with it. I once heard about romantic relationships “every emotional injury must heal 101% as to make the relationship stronger”. The same thing goes with projects, resolving problems should give more satisfaction than the frustration they cause, because programming is a never ending source of frustration (and satisfaction).