Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

AngularJS issue: Anchor<a> not working as expected on IE 11. #14596

Closed
ninad-d opened this issue May 12, 2016 · 4 comments
Closed

AngularJS issue: Anchor<a> not working as expected on IE 11. #14596

ninad-d opened this issue May 12, 2016 · 4 comments

Comments

@ninad-d
Copy link

ninad-d commented May 12, 2016

Do you want to request a feature or report a bug?
Bug or unexpected behaviour.

What is the current behavior?
anchor tag with ng-click behaves differently on IE11.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).
Steps:

  1. Run the demo on IE 11
  2. Select an element from the list.
  3. Click on "Add" button.
  4. Now try clicking on the first list you will see that you are not able to select any element from the first list now.

http://codepen.io/ninadd/pen/mPovzv

What is the expected behavior?

On click of "add" button element should be added to the next list irrespective of the previous additions.

What is the motivation / use case for changing the behavior?

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.
Angular v1.4.9
Browser: IE11
OS: Windows 8.1 x64

Other information (e.g. stacktraces, related issues, suggestions how to fix)
Fix:
Replacing the anchor tags with button tags seems to do the trick. But my question is why IE interprets anchor tag differently than other browsers.

@ninad-d ninad-d changed the title Anchor tag now working as expected on IE 11 Anchor tag not working as expected on IE 11 May 12, 2016
@ninad-d ninad-d changed the title Anchor tag not working as expected on IE 11 AngularJS issue: Anchor<a> not working as expected on IE 11. May 12, 2016
@Narretz
Copy link
Contributor

Narretz commented May 12, 2016

This looks like an IE bug that is fixed in 1.5.5 (and will be included in 1.4.11. You should upgrade to 1.5.x, though)

That said, using anchors as buttons is very bad for accessibility, and you should not do it in the first place.

@ninad-d
Copy link
Author

ninad-d commented May 12, 2016

@Narretz thanks for the update. Meanwhile I tried to test the said solution by replacing anchor tags with button in my code and sadly it does not works. The scenario was like this earlier.
When I was testing the above code on IE11 the list use to become non-responsive, I tried searching and came across the issue that says ngOptions has a rendering issue on IE(#2809). I tried everything said on that page but nothing seems to work. So in-order to report I opened up the above issue and while making a code-sample I came to know that replacing anchor tag with buttons solves the issue #14596. But when I implement the said fix in my code it does not works while the said solution works in the codepen. So just to be sure i applied an ng-if condition on the first select box in my code and then it started to work. But once I am done transferring all the elements from the first list to second list, the second list starts behaving like the first one i.e after transferring one or more element it stops working. So i tried with an ng-if statement on both of the select and now both of the select dont work after transferring one ore more elements.
Do you have any idea of what might be going wrong. My guess is there is some rendering issue on IE after models are updated.
Also I will try to update to 1.5.5 and see if that fixes the issue.

@Narretz
Copy link
Contributor

Narretz commented May 12, 2016

I tested with 1.5.5, and couldn't repro the bug.

@ninad-d
Copy link
Author

ninad-d commented May 19, 2016

@Narretz seems you are right. I tested the with 1.5.5 and could not repro the issue. At the same time I tested it out with 1.4.9 and still could not repro the issue.
I was wondering what could be wrong here when I realised that may be the styling of the page is messing with it. We are using Angular Material and following their layout pattern and CSS in our code.
When I am removing all the styles from the page, the page works irrespective of version of angular i.e 1.4.9 or 1.5.5 but as soon as I am adding the styles something goes wrong with the page and the list stops working.
I may be wrong about my conclusion, may be you can shed some more light on it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants