Unable to edit code on Firefox v93

[ffxsam]

In Firefox, the editor is hardly usable. I can paste code, but I can't drag/select code and I can't edit by replacing highlighted code.

See video:

https://user-images.githubusercontent.com/12532733/138191998-b1e1b781-525e-4c31-8ef4-ec4a0829bb6a.mp4

[NoahTheDuke]

Seeing the same behavior, FF 93, OS X 10.14.6

[psiho]

Hm, probably last version and drag&drop reorder functionality caused it. But I'm pretty sure I tested FF back then. Not using it since though. I'll check.

[Dook1]

I confirm this on FF100. Maybe you can fix this error?

[psiho]

my update is long overdue, but I'll push this to my urgent list and a patch release. Browser compatibility is a must. Hopefully, tomorrow night it will be released

[Dook1]

Thanks

[psiho]

Uh, was expecting a simple fix, but it seems to be a 7 year old FF bug (or a feature?): https://bugzilla.mozilla.org/show_bug.cgi?id=800050

In short, Mozzila says input fields can be either draggable or selectable, not both, while others implement it better. I'm considering some dirty hacks or maybe creating drag handlers.

Need more time, but working on this.

[Dook1]

I'm looking forward to it.

[psiho]

FF workarround is implemented so dragging is disabled when textboxes have focus.

This is on test: https://dev--jsbenchme-v1.netlify.app/ Will publish it tomorrow if no complains. Tested on Chromium, Webkit (Luakit) and FF browsers.

FF is slightly sub-optimal, because you have to click outside of the editor (to loose focus) in order to be able to drag&drop the case. Chromium and Webkit don't need this, as focus is lost before drag starts, so you can start dragging while still textbox is focused.

[Dook1]

That's better. But: 1) dragging with loss of focus is not very convenient. 2) for some reason, after dragging, there is a shift to the next line and part of the line is lost after the dragged object. Then, after entering any character, everything is restored.

[psiho]

for n2... I just can't reproduce it. Was dragging my a** off and no issues :) FF 99.0.1 (64-bit) on Arch. I'll try Windows machine.

for nr.1... not sure I understand exactly what you mean, but I guess it's the thing I mentioned... a need to click inside/oputside of the text area to start drag/edit, so an extra click. I'll think about ways to resolve this. Maybe handling focus onMouseOver/Out can help. I'll do what I can do without completely changing the system, but I'm not willing to go out my way to compensate something I believe is the FF bug. They should handle it. For me, it's important that JSBenchme is usable, which it wasnt on FF before.

[Dook1]

1) Yes, that's right - click from the outside and only then drag. This Firefox bug is 10 years old, so it's unlikely they'll fix it in the next 100 years. 2) I reproduce this on FF 100.0.1 Win64

[psiho]

While I dust off my Windows PC, here is an improvement for FF focus mentioned above. I think that extra click is gone now.

https://dev--jsbenchme-v1.netlify.app/

[Dook1]

Everything has become much worse than it was originally: nothing is dragged, mouse clicks do not change the cursor position.

[psiho]

Everything has become much worse than it was originally: nothing is dragged, mouse clicks do not change the cursor position.

Hm, something is very different with your browser or maybe something from the old versions is cached on your side, try shift+refresh. I tested this on Chrome, Webkit and FF browsers and it works. Couldnt try it on windows machine today but will try it tommorow.

[Dook1]

Of course I pressed Ctrl+F5, I even restarted the browser. All the same.

[psiho]

@Dook1, I simply can't reproduce any issues. Tried FF 95.0.2 and 100.0.1 on my Windows10 machine and no issues whatsoever on the test location (version 1.2.0-3 dev)). Any ideas how to help me reproduce this? Maybe it's some use scenario I'm not trying or something specific to your environment? Can you try it on any other browser/PC? I even tried a fewm Android mobile browsers I have.

[Dook1]

I tried it on my laptop - everything is the same. Just in case: I checked at this url - https://dev--jsbenchme-v1.netlify.app / . An entry appears in the console at the start of dragging: "DRAG START OK, handle detected". After releasing the mouse button, nothing happens.

[Dook1]

And the most important problem in which apparently is the main reason: mouse clicks don't change the cursor position.

[12Me21]

I'm still having problems too (Linux, firefox ESR 91.9) I think the only reliable fix would be to permanently remove draggable=true from all editable elements and their parents (at least in firefox) There's still plenty of draggable space on the left side of the element, anyway

[psiho]

I think the only reliable fix would be to permanently remove draggable=true from all editable elements and their parents (at least in firefox)

I think that's going to be a fix, at least for this patch version. Problem is, I haven't been able to reproduce this issue (on test location) on any browser/PC I tried and I tried many so I think only reliable solution is this. With 2 small(er) caveats: 1) case name textbox will still experiance old issue (not being able to select text with the mouse). I cannot remove it from being a child of draggable element easily. 2) When dragging, visually, instead of dragging complete test case row, only left part will be dragged.

I'm not giving up on this totally, but I want to make FF usable for now. Just need a day or two to find time for this. Busy week. Weekend at latest.

[psiho]

Well, finally I managed to reproduce this on FF 111. Back on track and trying to save drag&drop feature

[psiho]

@Dook1 , @12Me21 , @ffxsam , @NoahTheDuke ... it's been long, but if any of you can test gain, would be really helpful. Now that I managed to reproduce a problem it was easy to solve it, but I'm not sure if I managed to reproduce all the issues.

I've made dev version available at: https://dev--jsbenchme-v1.netlify.app/ Take a look and let me know.

[Dook1]

Blocks "Setup JavaScript/Setup HTML/teardown JavaScript" works fine. In blocks "Test case" dragging still does not work.

[psiho]

Simply unbelievable. I managed to reproduce exact behavior as in the video of the original post, and sorted it out with this update. Tested on 4 different browsers in 3 different OSes, including android.

I'm giving up on this for 1.2. Drag & drop will be completely disabled in v1.2 and I might get back to it after v1.2 is published. There's no point in delaying it for this and there's no point in making the app unusable for so many people.

[KTibow]

The cursor is glitching around for me in Firefox on jsbench.me.

[psiho]

The cursor is glitching around for me in Firefox on jsbench.me.

Can you be a bit more specific? Almost all code related to this issue was removed in the last version. I'm pretty sure it's not related to this issue. Also, besides of a bit more details on how your browser behaves exactly... your OS and FF version could help.

[KTibow]

I don't remember what glitches I was encountering back then but this is one I just found: Screencast from 2023-08-23 08-00-19.webm Fedora 38, Firefox 116.0.2 (64-bit)