Safari: gold-phone-input stylizes as focused after clearing it's value #33

exactspace · 2015-10-23T21:43:04Z

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="&#65290;Paper input" 
            spellcheck="false" 
            auto-validate 
            style="width:40%; display:inline-block; margin-right:10px;">
        </paper-input>

        <gold-email-input 
            id="email1" 
            label="&#65290;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 = "";


    }   


}

notwaldorf · 2016-01-30T00:10:02Z

Would it be possible to reproduce this in a smaller case, in a JSBin? Check the CONTRIBUTING.md for a sample JSBin to get you started.

exactspace changed the title ~~gold-phone-input stylizes as focused after clearing it's value~~ Safari: gold-phone-input stylizes as focused after clearing it's value Oct 23, 2015

notwaldorf added the p1 - backlog label Jan 30, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Safari: gold-phone-input stylizes as focused after clearing it's value #33

Safari: gold-phone-input stylizes as focused after clearing it's value #33

exactspace commented Oct 23, 2015

notwaldorf commented Jan 30, 2016

Safari: gold-phone-input stylizes as focused after clearing it's value #33

Safari: gold-phone-input stylizes as focused after clearing it's value #33

Comments

exactspace commented Oct 23, 2015

notwaldorf commented Jan 30, 2016