Text is Reversed when typing in the Code Editor when Editing Lovelace Cards

GrizzlyAK commented 2 years ago

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

On Windows 10, Firefox 93, when editing a Lovelace Card in the UI Code Editor, sometimes what I type is reversed, or entered right to left. Much of the time, it works as expected, but at other times, when I type 'livingroom', I get 'moorgnivil', for example. Even the Del and Backspace keys works opposite in those instances. Very frustrating and odd. Has happened on multiple occasions, and I can't determine a pattern, although, it does sometimes fix itself after going out and back in a few times. This NEVER happens in any other web page I use with Firefox, ONLY with HA.

Describe the behavior you expected

That text is entered in the order it was entered, left to right, instead of right to left.

Steps to reproduce the issue

Not sure how to reproduce this on demand. I don't know if it is Firefox or HA code. But it ONLY happens on the HA Frontend when editing Cards in the Code Editor. Nowhere else in Firefox, or in HA, does this occur, which points to the HA Web Frontend code somewhere.

What version of Home Assistant Core has the issue?

2021.10.6

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Firefox 93

Which operating system are you using to run this browser?

Win 10 x64

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

spacegaier commented 2 years ago

But I am not a web dev, so I dont know.

Yes, indeed, you do not know, hence this comment helps exactly 0 % 🙄. Feel free to write a custom code editor (quite a big task), but we will stick with a proven implementation and try to help ironing out any remaining bugs. In order to do so, we first need a reproducible example and so far no one in the community has been able to provide one, see also this thread https://community.home-assistant.io/t/lovelace-editor-inserts-chars-backwards-how-to-use-external-editor-for-raw-code/293163.

Sorry for the snarky comment, but had to be said...

GrizzlyAK commented 2 years ago

Sorry for the snarky comment, but had to be said...

Not really, and exactly 0% helpful. The link you included illustrates that this has been an ongoing problem and source of frustration for a lot of users for many months now. Just because it isn't easily reproducible, doesn't make it a non-issue. In fact, I can easily reproduce it: I only need to edit a Lovelace card at least daily, and it will undoubtedly appear. Being snarky is not inducive to getting helpful feedback from thousands of users who use/test OSS daily.

In order to do so, we first need a reproducible example...

When did THAT become a rule?

spacegaier commented 2 years ago

My comment "0 % helpful" was in regards to the (now apparently deleted) comment from a user that we should just re-invent the wheel and code a custom HA code editor. That is just ludicrous hence my snarky comment. Nowhere did I ever say that the reported issue here is a "non-issue".

In order to do so, we first need a reproducible example...

When did THAT become a rule?

That's a general software principle: Unless you know exactly where and why a bug appears, you need to be able to (ideally reliably) reproduce it in order to analyze and then fix it. The link I posted shows, that this seems to be difficult so far.

At least I personally am not keen on randomly clicking around in the frontend in the hopes of unreliably encountering the bug once in a while. But other contributors here might have a higher patience threshold for using their precious free time...

GrizzlyAK commented 2 years ago

That's a general software principle: Unless you know exactly where and why a bug appears, you need to be able to (ideally reliably) reproduce it in order to analyze and then fix it. The link I posted shows, that this seems to be difficult so far.

At least I personally am not keen on randomly clicking around in the frontend in the hopes of unreliably encountering the bug once in a while. But other contributors here might have a higher patience threshold for using their precious free time...

During my 25 years as a SW engineer, that first part we referred to as a "bug fix" and the second part was called "debugging". The second is much harder than the first but, unfortunately, must still be done. Maybe I'll get lucky going through 100,000 lines of code that I've never seen before, but I'm looking.

GrizzlyAK commented 2 years ago

I'd like to bring attention to the following PR that was merged in February, shortly before this issue was first reported in March here. The PR mentions rtl, and the change occurred just prior to first reports of the issue (AFAIK). Perhaps something in that PR triggered the issue?

github-actions[bot] commented 2 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

thetic commented 2 years ago

This issue still affects me on 2022.2.2

GrizzlyAK commented 2 years ago

I still see it periodically as well. I've found that (using FF) if I simply back-out and refresh the UI, and go back it to the editor, it usually works correctly. Strangely, sometimes, it will start reversing, and I continue typing things in reverse (I've gotten pretty darn good at typing things in reverse to accommodate!), but then it suddenly starts working correctly again. Very weird bug.

DcR-NL commented 2 years ago

Also still an issue here. 2022.2.6 (docker) on Firefox 97. The only way to resolve it, is to refresh the page.

It drives me nuts as it always happens in the middle of code editing a card from the Lovelace interface. Nowhere else have I ever seen this behavior.

GrizzlyAK commented 2 years ago

Agreed. Still an issue in Lovelace editor only. Never see this ANYWHERE else.

Akusky commented 2 years ago

Still an issue for me.

lindhe commented 2 years ago

I just started getting this when editing YAML templates in the web editor. I get the feeling that my issue is caused by some changes introduced by the new autocompletion features in 2022.3, but I'm not sure.

Should I open a separate issue for that, or do we want to gather all similar issues here?

GrizzlyAK commented 2 years ago

If you are referring to editing the YAML of Lovelace cards for the UI using the built-in editor, this issue covers that, so no need to create a new one.

Seperis commented 2 years ago

This has been an issue for me for at least six months to a year and happened five minutes ago, again.

Home Assistant: 2022.4.5 Supervisor: 2022.04.0 Home Assistant OS: 7.6

Steps to Reproduce: edit cards, it will happen at least once a day or more.

ETA: the most probable way to induce it for reproduction reasons is to open a card for editing and do the following: 1.) copy the lines of an entity_id and name in the yaml with ctrl-C, 2.) hit enter to create a new line. 3.) paste with ctrl-V, 4.) make a change the entity_id, 5.) move cursor manually to the name line with mouse/touchpad, then try and change/edit the name field. 6.) The magic happens.

This was tested on a vertical stack of three entities cards, each with three entities; the second card also had names with each entity, which is the one that I used to test. This is not the only way it happens, but it's the one I could make happen if I just kept trying. The longest it took between tries for the problem to occur was less than fifty but more than ten. While doing so, I noticed that the right arrow key didn't work either. I wondered if it was less a text problem than a cursor problem.

Observations: 1.) The cursor remains in a fixed position while typing while all characters comes out to the right (hence, backward text). 2.) I could manually with my touchpad move the cursor to the right to another position in the line. After moving the cursor, however, the problem would persist.
3.) Backspace worked to move the cursor to the left until you ran out of card. 4.) Typing regularly would not move the cursor to the left or right; while tying, the cursor remained stationary and would move from the position it was in when the problem started. 5.) Nothing on my keyboard would move the cursor to the right and I may have hit every key. 6.) The problem would end if you left it alone for a few minutes, if you canceled out and went back in, or if you did an unknown series of actions in the line causing the problem that made it stop.
7.) However, as long as it was happening, you could move your cursor to a different line entirely anywhere on the yaml and it would start doing it there.

I am not a web developer either; I'm a quality control analyst:. I found this when I searched for cursor not moving issues causing backward text in online editors: a.) https://stackoverflow.com/questions/66330479/rich-text-editor-cursor-doesnt-move-making-the-text-be-typed-backwards b.) https://github.com/sstur/react-rte/issues/242 <--this one has video showing the cursor not moving with text which is very much how it looks in yaml.

GrizzlyAK commented 2 years ago

@Seperis this is an excellent description of the issue. I'm not sure why this hasn't been addressed as it must be affecting everyone. Perhaps nobody else edits their Lovelace Cards... It is aggravating for sure, and the only way I know to remedy it once it starts occurring is to back out of the editor, reload the page, and go back into the editor again. On rare occasions, it will persist, but I've had good luck with that clearing the issue for a while. On some weird occasions, the text reversal stops without reloading the page. I'm using Firefox. What browser are you using? Have you ever noticed it in the mobile app? I can't recall ever seeing it there, but I don't do very much editing in the mobile app.

Seperis commented 2 years ago

I completely forgot my computer specs: this was tested on two since I had insomnia. Windows 10 Firefox 99.0.1

Linux Mint 20.3 (Cinnamon) FIrefox mint-001-1.0

There were a few things I noticed after I finished writing this and it happened again. 1.) the arrow key issue is variable, it may or may not happen and it could be my computer being weird. 2.) there's a definite time limit on how long it does this and it's probably around five minutes. I noticed because I was running Inspect at the same time and I stopped to read through the console and javascript files and when I went back to the line, everything was fine. This happened a few times where it just seemed to time out if I left it alone. 3.) To be more specific about point 7 above; it affects not necessarily the entire card but everything loaded in the code editor, which could be one card or if you're stacking, all of them if that's what you opened in the code editor. 4.) When forcing reproduction of the issue, it was more likely to happen if I selected/highlighted the text to overwrite it. Specifically, when I was doing it very very fast and most often when I could manage not to think about what I was doing. Usually I was trying to highlight text between two single quotes to overwrite or delete.

Inspect was not really helpful but I did keep getting Uncaught Exception "NS_ERROR_FAILURE" in the console. I can't truthfully tell if it had anything to do with it.
Except in the CSS I found a cursor animation that live tracks the cursor's top and left positions in the card in the second line. I tried very hard to get that to open to see what the cursor position looked like when i was trying to type but never did manage to get there before the problem stopped.

'<div class="cm-cursorLayer" aria-hidden="true" style="animation-duration: 1200ms; animation-name: cm-blink2;"> <div class="cm-cursor cm-cursor-primary" style="left: 201.067px; top: 252.75px; height: 16.5px;"></div></div>

I have not tried in mobile but my tablet's screen is big enough that I could try if I can find my bluetooth keyboard.

Hopefully they'll fix it. I have some terribly long cards and it's bad enough that the editor for some reason is very small, can't be full page or be manually resized, and has a bad habit of resizing itself at random when I'm having to double scroll; the stuck cursor is just salt in the wound.

Also, if there's a way to manually resize the card editor--ideally to full page so I don't have to double vertical and also horizontally scroll to edit a card--please share; I'd be extremely thrilled.

pascallj commented 2 years ago

I also just stumbled upon this issue. For me it also happens inside the template editor in the developer tools. However not straight away in a new session.

Easy way to reproduce this:

Open a new private tab so the session is fresh and clean
Edit an automation and click (no editing required) on a textbox which is below the "Edit in YAML" field (might work with any YAML editable field)
Go to the template editor in developer tools
Go to a new line after the demo template
Typed text will be in reverse

I'm not quite sure when it fixes itself, but somehow it fixes itself after some actions.

Tested in Firefox 91.8.0esr. Does not happen on mobile Chrome via the Web App.

rnorth commented 2 years ago

I seem to trigger this quite frequently when I double-click any text in a code editor (e.g. to select a word). For me, the following repro steps seem pretty reliable:

start with code editor(s) visible but not focused
double-click within any editor
(optionally) click in any other editor to move focus/cursor
start typing, and see that the text is appearing right to left
to return to a normal state, click outside the editor to lose focus, then click (once!) inside the editor again

This occurs in Firefox 100.0b9, only in the lovelace editors (e.g. no other webapps have this issue, nor do HA editors such as the developer tools template editor have this issue).

pascallj commented 2 years ago

[...] nor do HA editors such as the developer tools template editor have this issue [...]

What do you define as a lovelace editor? Because for me it does happen inside the developer tools template editor.

rnorth commented 2 years ago

[...] nor do HA editors such as the developer tools template editor have this issue [...]

What do you define as a lovelace editor? Because for me it does happen inside the developer tools template editor.

Sorry, to be slightly more specific, this happens for me when editing a dashboard, for both code editor and visual editor ha-code-editor elements. I don't seem to be able to trigger it in the developer tools template editor. Maybe I've not stumbled across the same circumstances as you to get that to happen!

rnorth commented 2 years ago

Ah interesting; when this happens I also seem to get the following exception appear in the firefox console:

Uncaught 
Exception 
columnNumber: 0
data: null
filename: "http://homeassistant.local:8123/frontend_latest/1993244c.js"
lineNumber: 1
message: ""
name: "NS_ERROR_FAILURE"
result: 2147500037
stack: "91643/updateSelection/<@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:89764\nignore@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:141404\nupdateSelection@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:89042\nupdate@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:150998\n91643/Fi/this._dispatch<@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:148868\ndispatch@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:149869\nselect@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:104625\nIe@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:104063\n91643/He.mousedown@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:107454\n91643/Le/<@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:100891\n"

Does anybody else experiencing this issue see the same?

Seperis commented 2 years ago

Ah interesting; when this happens I also seem to get the following exception appear in the firefox console:

Uncaught 
Exception 
columnNumber: 0
data: null
filename: "http://homeassistant.local:8123/frontend_latest/1993244c.js"
lineNumber: 1
message: ""
name: "NS_ERROR_FAILURE"
result: 2147500037
stack: "91643/updateSelection/<@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:89764\nignore@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:141404\nupdateSelection@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:89042\nupdate@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:150998\n91643/Fi/this._dispatch<@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:148868\ndispatch@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:149869\nselect@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:104625\nIe@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:104063\n91643/He.mousedown@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:107454\n91643/Le/<@http://homeassistant.local:8123/frontend_latest/1993244c.js:1:100891\n"

Does anybody else experiencing this issue see the same?

Yep. After the last time I tested this I saved this back since I googled and wasn't sure if it was specifically related to this.

Exception { name: "NS_ERROR_FAILURE", message: "", result: 2147500037, filename: "http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js", lineNumber: 1, columnNumber: 0, data: null, stack: "91643/updateSelection/<@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:89762\nignore@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:141402\nupdateSelection@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:89040\nupdate@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:150996\n91643/Fi/this._dispatch<@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:148866\ndispatch@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:149867\nselect@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:104623\nmove@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:104143\nEventListener.handleEvent*Ie@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:103289\n91643/He.mousedown@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:107452\n91643/Le/<@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:100889\nEventListener.handleEvent*Le@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:100688\nFi@http://172.20.3.229:8123/frontend_latest/1d9c7ce1.js:1:149380\nvalue@http://172.20.3.229:8123/frontend_latest/8614b8b7.js:1:11763\nasync*value@http://172.20.3.229:8123/frontend_latest/8614b8b7.js:1:10438\n_$AE@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:30458\nperformUpdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:30260\nscheduleUpdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:29842\n_$EC@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:29750\nasync*requestUpdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:29645\no@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:27377\nb@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:25768\nd@http://172.20.3.229:8123/frontend_latest/8614b8b7.js:1:8426\nE@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:850:118543\nt@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:850:116675\np@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:16122\nT@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:17718\n_$AI@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:17201\nm@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:16546\nT@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:17682\n_$AI@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:17201\nS@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:13407\nupdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:31450\nperformUpdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:30195\nscheduleUpdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:29842\n_$EC@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:29750\nasync*requestUpdate@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:29645\nset@http://172.20.3.229:8123/frontend_latest/app.b39ee8d3.js:1248:26431\n" }

I pulled the full error and saved it as well, so that's attached. I unfortunately didn't record how many times I got this testing, but it was definitely more than three times.

error_failure.txt

pascallj commented 2 years ago

Does anybody else experiencing this issue see the same?

No, I can't get this error to appear in the console. I'm on 2022.5.4. However if this error consistently shows up for you when the error happens, it might be useful to get a log when using a development build of the frontend so the code is not optimized/minimized.

deosrc commented 2 years ago

I've seen this quite a lot recently when copy pasting parts of automations. If I open an automation and switch some of the steps to yaml mode. Then click in the field and Ctrl+A. You can tell straight away if it has triggered as the caret will remain where it is rather than selecting everything in the text box. If it doesn't trigger, jumping between the fields performing select all, copy, paste seems to trigger it fairly quickly.

On latest attempt, I also got the same error as @Seperis in the console as soon as I hit Ctrl+A.

Browser: Firefox 100.0 (64-bit)

deosrc commented 2 years ago

Well I've potentially found the cause of the error @Seperis posted but unfortunately not found the cause of the backwards text. If they're related though, this may help. The cause of the error I believe is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1317098

I managed to reproduce the error in a development build (90c234ffad32ecf8cf0d45a1d57547255099a4da) and grab the stack trace: https://gist.github.com/deosrc/0956cc7e21cdde20eb71c6e0c3757611

From there I was going through the stack trace until I got to this section in the codemirror library:

else if (rawSel.extend) {
    // Selection.extend can be used to create an 'inverted' selection
    // (one where the focus is before the anchor), but not all
    // browsers support it yet.
    rawSel.collapse(anchor.node, anchor.offset);
    rawSel.extend(head.node, head.offset);
}
else {
    // Primitive (IE) way
    let range = document.createRange();
    if (main.anchor > main.head)
        [anchor, head] = [head, anchor];
    range.setEnd(head.node, head.offset);
    range.setStart(anchor.node, anchor.offset);
    rawSel.removeAllRanges();
    rawSel.addRange(range);
}

https://github.com/codemirror/view/blob/3df1514b86a72153ed9d568f06bfef3de02241ce/src/docview.ts#L197-L211

The error is occurring on the rawSel.extend(head.node, head.offset); line. My debugging environment isn't ideal so I just added some console.log commands to see what was happening. rawSel at this point seems to be a Selection object provided by the browser. Since this is controlling what is selected in the DOM, it failing results in the selection not updating.

I reworked the code to try protect against this as below:

else {
    let useFallback = false;

    if (rawSel.extend) {
        try {
            // Selection.extend can be used to create an 'inverted' selection
            // (one where the focus is before the anchor), but not all
            // browsers support it yet.
            rawSel.collapse(anchor.node, anchor.offset);
            rawSel.extend(head.node, head.offset);
        } catch (e) {
            console.error(e);
            useFallback = true;
        }
    }
    else {
        useFallback = true;
    }

    if (useFallback) {
        // Primitive (IE) way
        let range = document.createRange();
        if (main.anchor > main.head)
            [anchor, head] = [head, anchor];
        range.setEnd(head.node, head.offset);
        range.setStart(anchor.node, anchor.offset);
        rawSel.removeAllRanges();
        rawSel.addRange(range);
    }
}

This did fix the selection issue but unfortunately the text still types backwards. Obviously this is an imported library as well so would need fixing at https://github.com/codemirror/view.

GrizzlyAK commented 2 years ago

@Seperis

Also, if there's a way to manually resize the card editor--ideally to full page so I don't have to double vertical and also horizontally scroll to edit a card--please share; I'd be extremely thrilled.

I don't know of a way to resize the editor, but I just found that if I zoom the page in FF (using the ctrl-"scroll wheel" on the mouse) to 150%, the editor window changes so that it shows nearly twice the information on a line than it does at other zoom levels. See if that helps.

@pascallj

I also just stumbled upon this issue. For me it also happens inside the template editor in the developer tools. However not straight away in a new session.

This did not work for me, and I can say with certainty that I have never experienced this text reversal behavior EXCEPT in the Dashboard card editor; not in the template editor, not in File Editor, nowhere else. Is the codemirror editor used on each of these pages?

DcR-NL commented 2 years ago

@Seperis @GrizzlyAK

I don't know of a way to resize the editor, but I just found that if I zoom the page in FF (using the ctrl-"scroll wheel" on the mouse) to 150%, the editor window changes so that it shows nearly twice the information on a line than it does at other zoom levels. See if that helps.

In case you weren't aware; you can also click on the title of the card configuration window to expand the width, but it (sadly) won't give you the vertical stacked view you get from playing with the zoom.

GrizzlyAK commented 2 years ago

HOLY COW! Thanks!

How'd you ever discover THAT?

luckyjay commented 2 years ago

For me, this happens a lot if I have an automation with two cards in "Edit in YAML" mode.

I type in one and it works fine. Click in another, type, and it's backwards. Always the second one clicked in. Continued clicking between cards in edit in YAML mode causes the behavior to alternate and sometimes eventually goes away. No errors in the browser console.

Windows 10, Firefox 101, HA 2022.6.4.

hellcry37 commented 2 years ago

this is still happening 2022.6.6, Firefox 101.x, windows 10

medains commented 2 years ago

A minor piece of extra information.

When an input got into this state, and I was clicking around trying to resolve it I noticed the following.

After entering some text, entering something in another box and returning to enter more text - the issue would clear up. After clearing the issue and starting to enter some templating, as soon as I had entered {{ it would then occur again - the cursor sticking in place after the second brace.

So it may be something to do with the syntax highlighting code getting an off-by-one sometimes about where to replace the cursor.

GrizzlyAK commented 2 years ago

Apparently nobody is working to resolve this issue. Sadly, I rarely experiment with the Dashboard anymore and make only required edits now in order to avoid the frustration from this bug. I guess I assumed usability was important.

paranoidi commented 2 years ago

This happens approximately on every 10-15minutes of editing lovelace UI. When it happens ctrl-a (select all) is broken too. Firefox on Linux. Extremely frustrating to edit things.

Asgorath777 commented 2 years ago

I can add that this problem also occurs on the MacOS version of Firefox with me. As I saw most mention Windows.

GaryOkie commented 2 years ago

yet another "me too"... to track any progress on this very frustrating issue. (FF 104.0.1 HASS 2022.8.5 Win11).

And as mentioned before, it's not just the backward text thing, the awkwardly small editor window is painful to deal with long lines. Kudos to DcR-NL who shared the excellent (and totally non-intuitive) tip that clicking on the title does in fact resize the width! Whoa, that's a huge help.

!sknahT

hellcry37 commented 2 years ago

yet another "me too"... to track any progress on this very frustrating issue. (FF 104.0.1 HASS 2022.8.5 Win11).

And as mentioned before, it's not just the backward text thing, the awkwardly small editor window is painful to deal with long lines. Kudos to DcR-NL who shared the excellent (and totally non-intuitive) tip that clicking on the title does in fact resize the width! Whoa, that's a huge help.

!sknahT

Nice tuch there at the end, I love it!

paranoidi commented 2 years ago

I spent about 30 minutes debugging what series of actions produce this problem as I get it every 15 minutes of use which is really getting on my nerves. I have found a single click that reproduces this bug with 100% success rate. This should really help developers to fix this issue.

Steps to reproduce:

Add card (markdown)
Click on red area (cursor should be switched to indicate text)
Broken

hassbug

Edit: I did found out another way too before this, related to a double click perhaps? Add a new chip template mushroom card. Then double click on a field containing some text. I was not able to repeat it with other cards and situations reliably.

GrizzlyAK commented 2 years ago

@paranoidi, the above does not trigger the error for me, unfortunately. I've tried it several different times, clicking the red area first, and other times after already typing some text. Nada.

Sadly, I logged this issue almost a year ago, yet nobody from the dev team has even acknowledged the problem.

I don't do much Dashboard editing anymore, it's too frustrating, I also don't use History after the latest "improvement", as ALL of the functionality I utilized disappeared without warning. There seems to be a glaring lack of focus on usability at the top making me reconsider my Nabu Casa subscription. There are a lot of developers I could otherwise support here on github.

paranoidi commented 2 years ago

@GrizzlyAK @thomasloven Reported on discord that he wasn't able to reproduce this issue.

I can do it with 100% success rate in Firefox and Chrome in Linux. Maybe there is some operating system related component here at play.

This bug is easily the most frustrating this about hass for me too ...

GrizzlyAK commented 2 years ago

Hmm... that could point to either Firefox or HA and any of the libraries used by both, but doubtful the OS IMO. HA uses an OSS project for the editor functionality in the Frontend. I spoke to those guys a while back, and they had not experienced this issue with any other project using their editor, so I doubt that is the cause of this. Thanks for testing and reporting. All the reports from folks will hopefully help get this resolved... someday.

paranoidi commented 2 years ago

Yeah, I think it's some internal state of HA perhaps since it was happening on both browsers. I can no longer repeat the issue with the same steps either. HA was rebooted since. I will keep an eye and perhaps continue stress testing to see what triggers the condition. Mushroom chip card is still relatively easy way to trigger the bug. Clicking the very same area in there almost always breaks it.

jamesmyatt commented 2 years ago

I have a suspicion that it happens when there's a race condition related to an autocomplete or callback action (such as when you write mdi:). It might also require a relatively overloaded server, since it was happening lots on my 18 month old Raspberry Pi 3B install running on an SD card. But I've just moved it to a Proxmox VM this week which is far faster, and I'll see if it's still a problem.

pascallj commented 2 years ago

A race condition could explain why the circumstances are so different for everyone.

Server load is not the issue, as it also happened on a test build I had running on my Desktop. The UI rendering is done in the client anyway.

jamesmyatt commented 2 years ago

I just wonder if the race condition is related to waiting for some information to come back from the server, which might mean that an overloaded/underspec'ed server (as mine was) would increase the frequency. But I haven't been on my new server for long enough to notice a difference, especially since I can now use the VSCode addon.

However, if it's still an issue with your test server, then that might not be it.

paranoidi commented 1 year ago

@jamesmyatt I don't think it's related to network activity, I was running the UI with FF network monitor enabled and it broke without any request being sent.

Race condition sounds plausible though, maybe related to double click perhaps ...

transplier commented 1 year ago

Just confirming that this is still very much an issue on FF 106.0.2 on Kubuntu. Switching away from the tab and back temporarily fixed it.

d-Rickyy-b commented 1 year ago

I am also running into the same issue on Firefox 107.0.1 (64-Bit). For me I noticed it happening most (all?) of the time when selecting text. I use SHIFT+Arrow buttons a lot to select text, also SHIFT+CTRL+Arrow for selecting whole words. To me it seems like that's part of the reason, maybe others can confirm or falsify this assumption. Also I can confirm that this often happens in combination with the editor auto-complete dropdown feature. Very annoying since it happens every few minutes.

flabbamann commented 1 year ago

I am also running into the same issue on Firefox 107.0.1 (64-Bit). For me I noticed it happening most (all?) of the time when selecting text. I use SHIFT+Arrow buttons a lot to select text, also SHIFT+CTRL+Arrow for selecting whole words. To me it seems like that's part of the reason, maybe others can confirm or falsify this assumption. Also I can confirm that this often happens in combination with the editor auto-complete dropdown feature. Very annoying since it happens every few minutes.

I can confirm the problem seems to be related to selecting text. If I select whole words by double-clicking this happens all the time in the dashboard YAML editor. I can also say it does not happen in developer tools template editor, maybe that helps to identify the issue.

Firefox 108.0.1

steverep commented 1 year ago

I submitted a change to upgrade CodeMirror to the latest version (#14969). Some of the bug fixes may solve or improve this issue. This will probably go into 2023.2, but if anyone can test that branch ahead of time, it would certainly be useful.

flabbamann commented 1 year ago

I submitted a change to upgrade CodeMirror to the latest version (#14969). Some of the bug fixes may solve or improve this issue. This will probably go into 2023.2, but if anyone can test that branch ahead of time, it would certainly be useful.

How would I install your branch to my local HA core devcontainer environment?

home-assistant / frontend