Ionic-framework: ion-input irresponsive on Microsoft Edge 13

[infinnie]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Open http://ionicframework.com/docs/v2/demos/src/label/?production=true&ionicplatform=android with Edge 13/Windows desktop, and when trying to focus the input with the mouse, the input element isn’t focused.

Expected behavior:

The underlying input element should be focused, as is the case on Firefox.

Steps to reproduce:

1. Open http://ionicframework.com/docs/v2/demos/src/label/?production=true&ionicplatform=android with Microsoft Edge 13 on Windows.
2. Try to focus an input with the mouse.
3. See what would happen.

[mhartington]

Just used the following markup in edge and it worked without any issues.

<ion-list>
  <ion-item>
    <ion-label color="primary">Inline Label</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" fixed>Fixed Label</ion-label>
    <ion-input type="tel" placeholder="Tel Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="number" placeholder="Number Input with no label"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Stacked Label</ion-label>
    <ion-input type="email" placeholder="Email Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Stacked Label</ion-label>
    <ion-input type="password" placeholder="Password Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" floating>Floating Label</ion-label>
    <ion-input></ion-input>
  </ion-item>

  <ion-item>
    <ion-input placeholder="Clear Input" clearInput></ion-input>
  </ion-item>
</ion-list>

What version of ionic are you running? Rc3, Rc4?

[infinnie]

@mhartington RC4

[infinnie]

See http://ionicframework.com/docs/v2/demos/src/label/?production=true&ionicplatform=android

[jgw96]

Hey @infinnie just have a few questions for you. Could you run typeof Element.prototype.closest in the developer tools in edge on that page and post what that outputs please? Also, do you see this issue in an actual ionic 2 app running in edge too, or only on that demo in the docs?

[jgw96]

Update on this issue. With our demos on the docs site we use our ng polyfills instead of our full polyfills. The ng polyfills only include the polyfills needed for angular to run and nothing extra. This is fine on browsers such as chrome or firefox that do not need any extra polyfills, but in cases like this where a browser does not support something, like edge and the closest dom method we do need to include our full polyfills. This is an easy fix but I am checking for why we went with only the ng polyfills first before i change that.

[infinnie]

@jgw96 undefined.
However GitHub has been providing a polyfill for the .closest() method on browsers not natively supporting it.

[jgw96]

Thanks! It was due to us using our NG polyfills and not the full polyfills. Once that PR i opened above gets merged it will be fixed.

[jgw96]

Hey @infinnie . I am going to close this one now as that PR was merged (into a different branch, thats why its marked as closed). Thanks for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.