@fdellwing opened this Issue on December 11th 2018 Contributor

https://forum.matomo.org/t/problems-with-internet-explorer-11-ie-11/30903

If you add a new user in IE11, the UI is broken. As far as I was able to observe, there are at least two problems:

  1. The onfocus and onblur events are missing or not working, they should add/remove the active class from the label.
  2. The :focus pseudo-selector does not work, nothing is turned green.

matomo12

@tsteur commented on December 11th 2018 Member

We'll need to see if that's an easy fix or not. Do all other forms work well? Wondering if it is a materialize.css issue or an issue with our code.

@fdellwing commented on December 11th 2018 Contributor

I did not check other forms, just confirmed the message in forum on our test VM.

@tsteur commented on December 19th 2018 Member

I've debugged for quite a while and found out that the disabled attribute is causing it. Was at first thinking that it accidentally sets a disabled attribute on the input form, but the problem is actually the disabled attribute on the DIV element that defines the form component. When removing this attribute, everything works as expected.

image

Calling Materialize.updateTextFields() fixes the issue, but would need to be called after every field change/keystroke/... so this is not a solution.

Seeing there is eg this code:
image

Haven't debugged this further, couldn't really find a fix so far. Wonder if it is some IE or jquery bug.

Adding a placeholder attribute with an empty string kind of worked

image

and made the label appear correctly but the text was still shown like it is disabled...

image

for some reason this prefix for placeholder is applied for the color:
image

the only solution I can think of so far is to provide an alternative attribute and deprecate disabled in field-directive.js. Could use matomo-disabled=... or disable=. This worked for me as a workaround.

@fdellwing @diosmosis any thoughts maybe?

@fdellwing commented on December 20th 2018 Contributor

I can confirm, that the disabled is causing the issue. If it is not a big deal, the easiest solution would be to refactor it to something different. To not break with HTML specs I would propose data-disabled.

@tsteur commented on December 20th 2018 Member

@fdellwing genuis! :) actually angular already supports data-disabled so we don't even need to do anything and no BC issues etc when making plugins compatible... :)

See https://docs.angularjs.org/guide/directive

image

just double checked and changing it to data-disabled worked in IE

This Issue was closed on December 21st 2018
Powered by GitHub Issue Mirror