Keepassxc-browser: Icon obstructs input text on RTL forms that rely on text-align:right

Created on 24 Sep 2020 · 11Comments · Source: keepassxreboot/keepassxc-browser

The code here https://github.com/keepassxreboot/keepassxc-browser/blob/c90cff8f65d2ef67b30c51e38dcf1fedd620a97e/keepassxc-browser/content/ui.js#L104-L106

checks if the page has set document.dir to rtl to see if
the inputs are RTL. But at least one major bank in israel doesn't
use that, but instead uses the text-align:right CSS property,
for the inputs.

So on this site, input text writes from right-to-left but keepassxc-browser
doesn't detect that and puts the icon on the right-hand side of input, which
hides what the user types.

Website:
https://www.mercantile.co.il/MB/private (Use big green button)

PR pending bug

Source

ghost

All 11 comments

Providing check for text-align: right would only work if getComputedStyle() is used, and that's something we want to avoid. This would be called every time any icon changes position (on scrolling, etc.), so this will be not fixed. I suggest you contact the page developer and suggest using the standard way <html dir="rtl">.

varjolintu on 26 Sep 2020

It's unlikely that a bank would retool their website for a fringe group of customers.
How about adding a manual setting or override? part of the custom field detection UI perhaps?

ghost on 26 Sep 2020

A custom option for a rare situation like this would be too much. It's better to suggest others using standard methods, instead of adding support to every non-standard method for some random page.

varjolintu on 26 Sep 2020

👍1

Sound advice, but basically you're saying I'm SOL.

All the same, thank you for responding so quickly I appreciate it, and thank you also of course for all the work you do on KeepassXC.

ghost on 26 Sep 2020

👍1

If you don't mind, I'll stretch your patience and ask: why does getComputedStyle() need to be called on every UI event? if you assume the text-align direction is fixed per input (reasonable), wouldn't it be sufficient to call it once for every input you detect on the page?

ghost on 26 Sep 2020

It could be possible to do that check only once when creating the icon, true. In that way it could be possible to do. I'll try it. Thanks for the tip! Maybe I was too quick to close this one.

varjolintu on 26 Sep 2020

Thank you!

Also, I checked the site for two of the largest banks in israel:
https://hb2.bankleumi.co.il/H/Login.html
https://www.bankhapoalim.co.il/he/login

and both have dir=rtl set on <body> and not on the <html> tag (in an iframe, for some), and document.dir always returns the empty string. So they have the same problem I think.

https://www.mercantile.co.il/MB/private and https://www.discountbank.co.il/DB/private
(different brands for same bank I think) don't have dir=rtl set anywhere.

Put together that's probably 80% of the bank market share in israel, so this isn't just an issue with some fringe website. I don't know any banks in Egypt, or Jordan, or UAE, etc' but maybe they have the same issue? have you had success reports from users in arab countries?

Actually, maybe document direction is not what the code should check at all? since text-align determines the alignment of the text, don't you always want the Icon on the opposite side of that in any case?

ghost on 26 Sep 2020

So the dir must be also checked for body element. Checking that is needed because there are not guarantees that site with dir=rtl would use text-align for input fields. We need to check both. In this case the check is needed only if dir=rtl is not used.

varjolintu on 26 Sep 2020

I'll be glad to test and report back on any PR you put up.

ghost on 26 Sep 2020

👍1