I’d like to add to the list of people impacting, I have been trying to replicate the issue but it’s not constant, looks from what people are saying it could be a firefox issue as I am also using Firefox 89.
If I can find a way to replicate it constantly I will let you know, otherwise it hits at least once a session when editing files, I’ve had it about a dozen times tonight, I think it’s happening enough that it will always hit but there isn’t anyway to force it to occur, more than happy to do some screensharing or log captures if needs be.
Having this as well, for a while now. Firefox 89 on MacOS 11.4, hass 2021.7.1.
When the behavior occurs, the code editor acts as if it is in “insert mode”, as defined on Wikipedia as: “insert mode, where the cursor inserts a character at its current position, forcing all characters past it one position further.” When I type, the cursor stays in the same place, and the characters move to the right, resulting in a backwards sentence.
Let’s see if we can narrow down the scope of the problem so we can open an issue, even if we can’t find a 100% reproducible case. I don’t see any open or closed issues that look like they refer to this problem yet.
OS: In this thread I’ve seen reports from both MacOS and Windows users.
Browser: In this thread I’ve only seen reports from Firefox users. Anyone experience this with other browsers?
This happened to me today in an entities card, but others here say it happens in the script editor and automation editor, so it seems to be something affecting the code editor in general, not tied to any cards.
When it happens, clicking outside the editor and then back inside fixes it.
I have not found a way to reproduce this but I’ve experience this issue for some time now using Firefox (latest available at the times) on Windows 10, Ubuntu, and Fedora.
Reading through this thread it appears Firefox could be a common actor in these complaints. If I can note something that is reproducible I’ll report back/raise an incident.
Happened to me too, firefox on Suse, seems only to happen if i take really long for edits (having the edit Box open in One Tab and reading what to do in another). Seems to be around 5 minutes or so. When it has happened it sticks to the card, until i click somewhere on the card not in the editing window and then reposition the cursor.
Also have been experiencing this for months now, but it randomly happens. I have to click elsewhere, type for a bit, then reopen the code editor. Sometimes I have to do this a few times for it to get back to inserting the correct direction. Very annoying, and I can’t figure out how to reproduce it - very random.
I’ve been seeing this behaviour for a while in Firefox on both Windows and macOS. I’ve not seen it yet in Firefox on Linux, but would not be surprised if it is hiding there too.
I don’t think Insert Mode is the right description, as that’s normal input (the Wikipedia entry is describing what happens when you place the cursor in the middle of existing text). What it’s doing appears like inserting a character and then moving the cursor one character left.
I wonder if the input box is being toggled to a right-to-left language setting somehow? Given it’s happening on all OSs it is presumably happening within the browser, as the OS level mechanism to toggle it varies between OS.
Looking in the developer tools at a yaml editor, there is a CSS entry:
element {
direction: ltr;
}
I will poke around and check that next time it occurs.
HA running with supervisor on a Virtual machine in Proxmox.
Access to the GUI via Firefox on Windows.
How to reproduce:
Unknown.
the issue happens from time to time when you edit a Lovelace UI Card in the Code-Editor.
Usually, you start typing as normal and at some point the input direction will change from Left-to-right to Right-to-left.
Sometimes, the issue can be resolved by clicking somewhere outside of the Input box - or, by changing the Browser-Tab.
Everything else appears to be normal, so just the codebox seems to be affected.
Not sure, if the UI is using some Framework, where the input direction can be changed by a specific keyboard input?
I’ve just searched in the User Manual - and there is an option to set the input direction:
direction: "ltr" | "rtl"
Flips overall layout and selects base paragraph direction to be left-to-right or right-to-left. Default is “ltr”. CodeMirror applies the Unicode Bidirectional Algorithm to each line, but does not autodetect base direction — it’s set to the editor direction for all lines. The resulting order is sometimes wrong when base direction doesn’t match user intent (for example, leading and trailing punctuation jumps to the wrong side of the line). Therefore, it’s helpful for multilingual input to let users toggle this option.
rtlMoveVisually: boolean
Determines whether horizontal cursor movement through right-to-left (Arabic, Hebrew) text is visual (pressing the left arrow moves the cursor left) or logical (pressing the left arrow moves to the next lower index in the string, which is visually right in right-to-left text). The default is false on Windows, and true on other platforms.
I will try to reproduce the issue with some key combinations…
EDIT:
Interesting… I was facing this direction change very often the last days… since I’m trying to reproduce it, it didn’t occure anymore…
Yeah, I’m also wondering if this is to do with RTL support in codemirror. Bidirectional support is the unknown for me. It looks like that tries to decide on RTL vs LTR within any given line, and I have no idea what might set it off.
Having this issue over here too. Cannot for the life of me work out what triggers it. I tried filming the issue, but of course it hasn’t happened since. I’ll keep OBS open just in case, though I suspect the result is less important than finding a common factor between everyone that’s got the issue.
@DagobahMike appreciate you trying to keep it focused:
Core: core-2021.9.7
Host: supervisor-2021.09.6 / HASSIO 6.4, running on a Raspberry Pi 4
OS: Linux 20.04 Kubuntu (but also happens on my Windows machine, also Firefox)
Browser: Firefox 92.0 (64-bit)
Situation: Happens in Lovelace YAML editor. Haven’t put any more pieces together than that. I’m running quite a few horizontal/vertical stacks, card-mod, and a lot of the standard tinkering stuff.
Work-around: Might be imagining things, but it sometimes seems to stop after I press the i key while typing into the editor. Other times it’s when I’ve clicked somewhere else. Other times I close and reopen the editor window, but that doesn’t always work. But it’s always BAM, I’m typing normally again, and have to delete the garbage I’ve just dictated to HA.
I had a poke around on GitHub, but I couldn’t find an open issue for this bug. Anyone have a link or a more solid description of the bug they’d like to open as an issue? Otherwise I’ll just go ahead in a few days and link it back here. But any more info people have to add here would be awesome. This bug is a massive PIA.
The problem is while editing in a normal English LTR YAML editor (characters intended to flow from left to right in order of typing), the editor appears to randomly switch to RTL, so characters get erroneously inserted to the left of the previous one.
I certainly haven’t got an RTL language locale (like Hebrew, Arabic, etc) selected anywhere else. I’m using British English everywhere: server and client.
the description in github sounds different than here in the forum, but I would consider the underlying issue is the same… ?
Maybe, the discussion here might help identifying the root cause.
I’ve had this issue in Firefox too and have found the Browser’s switch text direction shortcut (Ctrl+Shift+X) works in textareas like the Lovelace code editor, hope that helps!
I’ve experienced this issue as well on (the always latest) Firefox on Windows. It appears random, but is definitely reproducible: I simply have to edit a couple of cards and it will undoubtedly appear. It’s pretty frustrating. This NEVER happens on any other website in the same browser, so this MUST be related to Lovelace.
I have logged a bug report on the Lovelace Git here.
@HomeTrainee what I do when I have a large card, I show the editor for the full text, copy it all, paste it into my favorite text editor, make the changes, and then copy/paste it back into the Lovelace editor. Works fine. Of course, no visual editor, but if you need to make changes to multiple cards (like custom:button-card), it is an easy solution.
@jamesmarsh I did some testing around this CSS direction parameter in the editor, and I don’t think it is the culprit. If you change it to rtl the behavior is quite different in that the text on the page all over is reversed as well, not just new text. As pointed out earlier, the character is drawn, and then the cursor appears to its LEFT, so that any new characters are to the left of the previous.
Perhaps the Lovelace code using codemirror is missing events at times, like those that position the cursor after a keystroke. From a cursory look at codemirror, it appears to be working at that level of detail.
I have noticed that this issue happens when I am editing the dashboard and I type a symbol, usually a colon and sometimes an apostrophe. Hopefully this sparks an idea in a mind wiser than mine…
Thanks Nate. The more info like this we can gather about when/why this is happening, the more it will help track down the problem. I’ve requested help from the CodeMirror project to see if they can tell us if this is perhaps an issue with just HA’s use of their library, or if they’ve seen it before elsewhere. There was an update to Lovelace in February here that updated parts of HA’s usage of CodeMirror (just prior to the start of this thread). In it, there is mention of rtl.
EDIT: the guys at the CodeMirror project indicated that they’ve seen no such behavior in their library in their testing or in other implementations, and that the rtl connection is “very unlikely to be related”.
