U4-11530 - Some text input content can't be selected

Created by Sébastien Sougnez 19 Jul 2018, 13:31:36 Updated by Sebastiaan Janssen 01 Aug 2018, 08:08:16

Tags: PR

Hi,

I'm running Umbraco v7.12.0 and I noticed that some input text content can't be selected. For example, on the login screen, if you want to login with another user than the prefilled one, you can't just select the user name in the input and start typing to replace its content as the selection does not work (the text does not get selected). I also tried with the input to make a search in the tree and I have the same behavior.

However, some input works, such as the ones where you can define the properties of a document.

For the accessibility sake, all input text content should be selectable. I'm using Chrome.

1 Attachments

Download umb.webm

Comments

Sébastien Sougnez 19 Jul 2018, 14:50:39

I investigated a bit and unfortunately, I fear that it won't be fixable easily. Indeed, it appears that this issue comes from "angular-mobile.js". I didn't dig very deep but they apparently have an ugly way of preventing ghost clicks induced by mobile users, so they bind the "click" event of the root element (or something like that) to a function of their own that checks if the click is a regular one or a ghost one.

If it's a ghost one, the click propagation is prevented which messes up with text selection.

For information, the issue is located in "angular-mobile.js" at line "153-154".

I also checked the official documentation and it seems that angular-mobile has been deprecated since Angular 1.7.0 so it will have an impact on v8. The alternative proposed by Angular is HammerJs (https://hammerjs.github.io/) which is also used by Angular team.

What do you guys think? Should we wait for v8 to switch to HammerJs and would it be interesting to already do it in v7 and apply the changes for the v8 branch?

Personally, from what I saw, it's not heavily used in Umbraco (at first sight, it's used for the tree and the dialogs), so I would recommend making the switch in v7. If you, HQ guys, think so too, I can work on it ;-) Just give me the go :-D

(Another totally unrelated question... Am I the only one to experience huge lags and error 502 with this issue tracker?)


Claus Jensen 20 Jul 2018, 08:08:13

@ssougnez Thanks for looking into this. I'm however not really sure I understand what the issue you're experiencing is. When I go to the login screen, the username field is not prefilled with anything.

Could you make a quick screencast showing what the issue is just so we're clear on that?

In regards to v8 - yep that will definitely be a problem we will have to figure out due to the Angular upgrade happening here. I'm not sure what our solution will be yet, but we will most likely try following the recommendations from the Angular team if possible.

We prefer to do this switch in v8 and then based on the implications it has and the complexity of doing it, we can consider if it should be backported to v7. It will most likely not be a prioritized task for v7 though as we try to focus our resources on v8 for now.

But - as I cannot give you a clear answer as to whether we will actually be choosing this solution or not for v8 - it might not be a good idea to spend time doing this in v7 until we are sure about this. I would like to have @madsrasmussen take a look at this before you continue on this path.

Totally unrelated answer :) - Nope .. you're not alone. We're experiencing some huge lags and outages on the site. We're looking into migrating the issue tracker so hopefully this will be solved soon!


Sébastien Sougnez 20 Jul 2018, 09:28:19

@claus You don't really need to have something prefilled, you can just type text in it, then try to select it. In my case, it's prefilled by Chrome with previously used credentials.

I attached a screencast to this issue for you to see it. When you see the red circle appear, it means that I'm trying to select the content of the input.

For the upgrade, I can try to reproduce it with v8 and if the issue is still there, I can try to replace angular-mobile by HammerJs. I don't say that's the way to go but at least, when you have to take a decision, you'll know whether HammerJs is a valid replacement or not.

Cheers


Claus Jensen 20 Jul 2018, 10:27:14

Ahh I see exactly what you mean now - thanks.

Funny how I've never noticed that. Think it might be because I usually navigate by keyboard, but I can see how this is really annoying when using the mouse.

You're very welcome to test it out in v8 and try replacing with HammerJs to see if it fixes the issue. It will for sure assist us when making a decision - and if it simply just works, I don't see why we wouldn't go with that solution. I however just can't promise you anything yet even if you manage to make it work :)


Sébastien Sougnez 20 Jul 2018, 11:41:36

Ok, will do in the upcoming days. It won't be lost work anyway, it helps me entering in the Umbraco code base ;-)


Sebastiaan Janssen 01 Aug 2018, 07:59:50

PR: https://github.com/umbraco/Umbraco-CMS/pull/2819


Priority: Normal

Type: Bug

State: Open

Assignee:

Difficulty: Normal

Category: UI

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.12.0

Due in version:

Sprint:

Story Points:

Cycle: