home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
4.07k stars 2.79k forks source link

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

Closed GrizzlyAK closed 1 year ago

GrizzlyAK commented 3 years ago

Checklist

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

steverep commented 1 year ago

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

  1. Setup another dev container for the frontend repo
  2. Either point your core container to your frontend container via a mount, or just run the vscode task to run the core in your frontend container (it will automatically download and install latest core).
steverep commented 1 year ago

Reminder: If you're a beta tester, please look to see if this is resolved.

pascallj commented 1 year ago

Initial testing of the beta shows that at least I cannot reproduce this issue under the same circumstances as before :+1: The steps I posted before still reproduce the problem for me on 2023.1.7 but not anymore on 2023.2.0b1. I switched back and forth between these versions multiple times to verify this.

Given the unreliable nature of this issue it might still be possible that it occurs under different circumstances, however for now it seems fixed! Hope others can confirm this.

Thank you for your work and your reminder :pray:

randybb commented 1 year ago

Still broken in 2023.2.0b8, at least when I was playing with Services in YAML mode in Developer Tools.

steverep commented 1 year ago

@pascallj and @randybb please report browser and OS for your testing (and make sure you've cleared cache if you still experience the issue). Thanks!

pascallj commented 1 year ago

@steverep I think we have established by now that this issue happens on Firefox. I am running on Ubuntu 22.04.1 LTS, Firefox 109.0.

randybb commented 1 year ago

In my case openSUSE Tumbleweed and Firefox 109.0. Cleared cookies and still the same - after few clicks between YAML and UI mode.

steverep commented 1 year ago

I'm sure you probably cleared both, but to be clear, cache must be cleared (your login cookie is okay to keep). Usually a simple CTRL+F5 is sufficient.

Those are awfully similar specs, so hopefully others can test the 2023.2.0 version released today and report as well.

SpencerDub commented 1 year ago

I am running 2023.2.0 and Firefox 109.0 on Ubuntu 22.04.1 LTS. I did a CTRL+F5 to clear the cache.

The issue is still occurring for me.

Write commented 1 year ago

Just updated to 2023.2.0 and it still occurring(macOS 13.2 && Firefox 109)

steverep commented 1 year ago

For those still experiencing the issue, does it start occurring only while editing certain values (e.g. icons or entities)? I understand from reading the thread that it will occur anywhere after it starts, but I'm nost interested in what is being edited as soon as it starts to help track it down.

steverep commented 1 year ago

Also, what happens if, after you get some reversed text, you save the code, then refresh the page or navigate away and come back? Is the reversed text as you last saw it or missing any characters?

SpencerDub commented 1 year ago

I haven't confirmed this yet, but I'm wondering if its trigger has something to do with the auto-complete that shows up for entities, sensors, icons, and so on. It seems I'm frequently running into it after that auto-complete is triggered.

SpencerDub commented 1 year ago

As another data point: I have not yet seen this bug occur in the ESPHome YAML editor.

jamesmyatt commented 1 year ago

I don't remember seeing this now for a while. Probably since 2023.2.x.

Write commented 1 year ago

I don't remember seeing this now for a while. Probably since 2023.2.x.

Well you're lucky.

jamesmyatt commented 1 year ago

I don't remember seeing this now for a while. Probably since 2023.2.x.

Actually, it's definitely not fixed. :(

PulsarFX commented 1 year ago

Still happens on 2023.3.3 for me

mill1000 commented 1 year ago

Happened to me today.

Has anyone experienced this issue on a browser besides FF?

steverep commented 1 year ago

I think I have a good idea about what is causing this, but I cannot seem to reproduce it myself. I can try to throw up a test branch, but would need one or two folks who experience it regularly to setup a dev environment to test my changes. If there are a couple volunteers, I'll try to do it before next week's beta release.

Schluggi commented 1 year ago

I think I have a good idea about what is causing this, but I cannot seem to reproduce it myself. I can try to throw up a test branch, but would need one or two folks who experience it regularly to setup a dev environment to test my changes. If there are a couple volunteers, I'll try to do it before next week's beta release.

Sure. Let's do it :)

quadcom commented 1 year ago

This is like a personal support group for those with life problems!

And I've found my people!!!

Me too, and I am just starting with HAOS and building cards like a madman. This is driving me nuts!

I'll have to give the tab switching a shot to see if that might alleviate some pain till this gets figured out.

TommySharpNZ commented 1 year ago

When this starts happening for me (has been happening for at least the last year on and off) I notice that I cannot highlight any text with mouse. I have to stop and closed edit mode, refresh the page and then go back into edit mode and it seems to be fixed for a little while...

steverep commented 1 year ago

Alright I've got some good news and more good news if your patience hasn't run out yet...

I was finally able to reproduce this reliably using a technique similar to https://github.com/home-assistant/frontend/issues/10458#issuecomment-1126930173 above, although it is not optional to only be using one editor instance. I eliminated HA as the cause and found that the CodeMirror developers already had a recent issue - https://github.com/codemirror/dev/issues/1083.

However, they traced it to a bug in Firefox - Bug 1817723 - Having multiple editable elements in a shadow root breaks selection. The good news with some patience is that this is marked fixed for version 117.

If you're brave and impatient, download Firefox nightly to test 117. If not, it will be released at the end of August. Please report test results here.

steverep commented 1 year ago

I decided to just test Firefox nightly myself, and the problem does indeed seem to be fixed. In light of that, I'm going to close this issue.

GrizzlyAK commented 1 year ago

MANY, MANY THANKS to EVERYONE who tested, searched for patterns and clues, worked with other GitHub projects, made code changes, and finally tracked down the root of this issue. Thank You! #Teamwork

MaxVonEvil commented 1 year ago

+1 on the thanks for the hard work nailing down the cause of this pesky bug. To quote the old pirate who walked into a bar with a ship's wheel stuck on his johnson, said to the bartender; "Aaarrh, it be drivin' me nuts, laddie!" 😜

steverep commented 1 year ago

Just a reminder - Firefox 117 (which contains the fix) is now released.