Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

IE10 Placeholder blocking input focus #1394

Closed
O-Mutt opened this issue Feb 4, 2015 · 10 comments
Closed

IE10 Placeholder blocking input focus #1394

O-Mutt opened this issue Feb 4, 2015 · 10 comments
Assignees
Milestone

Comments

@O-Mutt
Copy link

O-Mutt commented Feb 4, 2015

With the placeholder value set it seems to be blocking the clickability of the input field. This can be seen in the demo as well First Name. I don't like the fix i have locally but i added a z-index: 0; to my placeholder as a work around. I attempted to bind a click event to the placeholder but it seems that it was being caught somewhere on the chain. Not sure if IE9 is a worry but similar issue is occurring with the label click, this i solved with a

element.bind('click', function(ev) {
  containerCtrl.setFocus(true);
  containerCtrl.input.focus();
  //any other existing code
});
@marcysutton
Copy link
Contributor

Note: We don't support IE9, only n-1 browsers (and IE11 is the latest).

@O-Mutt
Copy link
Author

O-Mutt commented Feb 5, 2015

Good to note for the label blocking focus, however, as the original bug still seems to stand and be a real hindrance on usability

@ThomasBurleson
Copy link
Contributor

@Mutmatt - Is this an IE9 or IE10 issue?

@O-Mutt
Copy link
Author

O-Mutt commented Feb 5, 2015

@ThomasBurleson IE10 placeholder blocks input focus. IE9 had a different issue but due to not being supported (and IE10?) this is a non-issue

@O-Mutt O-Mutt changed the title In IE10 Placeholder seems to be blocking input focus IE10 Placeholder blocking input focus Feb 6, 2015
@ThomasBurleson ThomasBurleson modified the milestone: 0.9.0 Feb 17, 2015
@marcysutton marcysutton self-assigned this Apr 2, 2015
@marcysutton
Copy link
Contributor

@Mutmatt can you confirm whether this is still happening? The input demos on http://material.angularjs.org do not have any focus problems in IE10 that I can find. First name has a placeholder and it can take focus and a value without any issues.

@O-Mutt
Copy link
Author

O-Mutt commented Apr 4, 2015

This is, indeed, still broken in IE10. See First Name: https://material.angularjs.org/#/demo/material.components.input

@marcysutton
Copy link
Contributor

Yeah, I looked at it in IE10 and it worked fine. Can you describe the issue in more detail, and try another machine? Thanks.

@O-Mutt
Copy link
Author

O-Mutt commented Apr 4, 2015

I will give it another shot on a different machine. This one is currently Win 8.1. The behavior i am seeing is clicking on the area where the placeholder is (albeit not visible) does not trigger the float label to float. I will check back in after testing on a second/third machine.

@O-Mutt
Copy link
Author

O-Mutt commented Apr 6, 2015

I retested this in IE10 and it is behaving this way still on the demo page. Clicking the region where the placeholder text would be does not trigger the label float and input focus. It does work if you click to the right of the location where the text would be.

In this example i click the area a few times to show what i am seeing.

Note: I have now seen this on Windows 8.1 IE10 and Windows 7 IE10

@marcysutton
Copy link
Contributor

Ok, I see it now. It takes a few clicks to register. But not every time! Fun.

marcysutton pushed a commit that referenced this issue Apr 8, 2015
pointer-events: none does not work in IE10

Closes #1394
@ajoslin ajoslin added in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs and removed resolution: fixed labels Apr 8, 2015
@marcysutton marcysutton added resolution: fixed and removed in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs labels Apr 8, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants