Occurs Safari 8.0.7, but not Firefox or Chrome.
gold-phone-input focuses after clearing it's value, and still stylizes as focused with the bold underline even if the blur function is called on the gold-phone-input's input element after clearing the value, i.e.:
var myGoldPhoneInput = document.getElementById("goldPhoneInputID");
if(document.contains(myGoldPhoneInput.inputElement)){
myGoldPhoneInput.inputElement.blur();
}It does not matter what order the elements are in - the gold-phone-inputs will always stylize as focused after clearing their value. Entering valid input into the gold-phone-input is required to get this bug to happen.
Here's some example code you can use to test it out:
goldPhoneInputBug.php:
<!DOCTYPE html>
<html>
<head>
<title>Gold Phone Input bug</title>
<meta charset="utf-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<link rel="import" href="bower_components/gold-email-input/gold-email-input.html">
<link rel="import" href="bower_components/gold-phone-input/gold-phone-input.html">
</head>
<body unresolved fullbleed layout vertical>
<form is="iron-form" id="form" action="goldPhoneInputBug.php" method="POST" autocomplete="off">
<p class="formSection">Paper inputs and gold email inputs work fine.</p>
<paper-input
id="nameFirst1"
label="＊Paper input"
spellcheck="false"
auto-validate
style="width:40%; display:inline-block; margin-right:10px;">
</paper-input>
<gold-email-input
id="email1"
label="＊Gold email input"
auto-validate
error-message="Enter valid email"
spellcheck="false"
style="width:40%; display:inline-block;">
</gold-email-input>
<p class="formSection">Gold phone inputs adds focused underline style after submitting.</p>
<gold-phone-input
id="phone1"
auto-validate
label="Gold phone input"
error-message="Enter US number"
style="width:40%; display:inline-block;">
</gold-phone-input>
<br/><br/><br/><br/>
<div style="margin: auto; text-align: center;"><paper-button id="submitButton" class="submitButton">Clear values</paper-button></div>
</form>
<script src="goldPhoneInputBug.js"></script>
</body>
</html>goldPhoneInputBug.js:
var formElementIDs = [
"nameFirst1",
"email1",
"phone1",
];
document.addEventListener('WebComponentsReady', function() {
var submitButton = document.getElementById("submitButton");
submitButton.addEventListener('click', function() {
clearFormValues();
});
});
function clearFormValues(){
for(var ID of formElementIDs){
document.getElementById(ID).value = "";
}
}
Occurs Safari 8.0.7, but not Firefox or Chrome.
gold-phone-input focuses after clearing it's value, and still stylizes as focused with the bold underline even if the blur function is called on the gold-phone-input's input element after clearing the value, i.e.:
It does not matter what order the elements are in - the gold-phone-inputs will always stylize as focused after clearing their value. Entering valid input into the gold-phone-input is required to get this bug to happen.
Here's some example code you can use to test it out:
goldPhoneInputBug.php:
goldPhoneInputBug.js: