polymerelements / gold-phone-input Goto Github PK

Eg, when a service says "Call 1-800-CATSNOW !" it should translate

A, B, C => 2
D, E, F => 3
G, H, I => 4
J, K, L => 5
M, N, O => 6
P, Q, R, S => 7
T, U, V => 8
W, X, Y, Z => 9

Therefore, CATSNOW => 228-7669. You can already do this on phones, for example:

Why isnt this published no longen on npm?

Last publish (https://www.npmjs.com/package/@polymer/gold-phone-input) was version 0.0.3 2 years ago!

I'm asking since I use ionic (which uses npm) and it would be great if don't have to add bower depencies just for this webcomponent!

It would be really great if the validation and formatting could be improved with googlei18n/libphonenumber.

The input should have a dropdown with countrycodes and flags and its use should be optional.

It should have "as-you-type" formatting and also update the selection in the dropdown as you type (in case you just write an international number).

The info that is then provided by googlei18n/libphonenumber can be used to make a great number of methods and events available.

It's a proposal. The user might not be able to enter more chars than the defined pattern. It will avoid to break the displaying. Maybe the input might bounce when the user is typing and the field is already filled.

After updating gold-phone-input, I ran into an issue where I'm getting the following error, I do not see any reference to _handleAutoValidate within gold-phone-input.

I get the same error if I just use:

I went from 1.0.0 => 1.0.6, now getting same error going back to 1.0.0

Any ideas?

While programmatically changing the variable assigned to value will update the displayed text, modifying the input field does not update the value variable.

Would it be possible to add a maxLength pass through on ~line 95 ish.

Which would look like:

maxLength$="[[maxLength]]"

This would allow you to manually constrain the input to the length of the pattern.
(Or did I miss how you were meant to do this?)

I recently tested gold-phone-input 1.0.6 using Firefox on an Android phone, and observed the caret incorrectly jumping backward after inputting only 4 digits.

Here is a video demonstrating the bug:
https://youtu.be/xNAQoInBK28

Notice that the caret behaves as expected after entering the first 3 digits, but after entering the 4th, it jumps backward (to before the 2), so that further input is added behind the 2.

I saw mention of caret issues in #18 and #32, but noticed nothing yet mentioning an issue after only 4 characters / using a mobile / narrower width, so I'm hoping contributing this extra information might help.

Description

In a polymer 2.0 project, the value property is not working. There are a few discrepancies between the v0 (1.0) and v1 (2.0) templates. The 2.0 template is using a couple of attribute bindings that should be property bindings and a handful of property bindings that should be property bindings

  // in 1.0 --
  bind-value="{{value}}"

  // in 2.0 --
  bind-value$="{{value}}"

Expected outcome

Value property is updated, value is formatted per the phoneNumberPattern property

Actual outcome

Value property is not updated

Description

Hey, Team!

When a gold-phone-input is nested in a dom-repeat, the formatting is not run on bound value.
I believe I've tracked down the issue to this code:

_onValueChanged: function(value, oldValue) {
      // The initial property assignment is handled by `ready`.
      if (oldValue == undefined || value === oldValue)
        return;

It looks like if the element is not yet visible (since it's created in the dom-repeat loop), oldValue is undefined and the formatting is skipped. If oldValue == undefined is removed, it fixes the issue, but the function is ran sometimes unnecessarily.

I can create a pull request if this solution works.

Expected outcome

<template is="dom-repeat" items="{{model}}" as="item">
<gold-phone-input value="{{item.phone}}"> </gold-phone-input>
 </template>

should render 987-654-3210,

Actual outcome

Instead it renders 9876543210.

Live Demo

jsBin

Steps to reproduce

1.start with empty model (array)
2. push a new item to model (I had the child as an object populated through ajax as well, not sure if this matters)
3. voila!

Browsers Affected

• Chrome (haven't tested others yet)
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

This is a feature request to add the ability to hide the country code.

Hiding the country code is useful for applications limited to local users to tidy up the environment.

Also, the gold-phone-input could be used to capture social security and drivers license numbers if the country code could be hidden.

Hi, _computeValue appears to be throwing the error when gold-phone-input's value is undefined. I have it bound to a nested property:

<gold-phone-input value="{{model.phone}}"></gold-phone-input>

So even if I initialize model's phone property to an empty string, gold-phone-input still gets undefined prior to model itself being initialized.

Simple check for null might be needed in _computeValue. Thanks.

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 = "";


    }   


}

(Issue based off Polymer website demo at time of entry)

gold-phone-input does not accept numbers typed via the numpad as valid.

Description

When the same variable is bound to multiple element instances, eg.:

<gold-phone-input label="Input 1" value="{{phoneNumber}}"></gold-phone-input>
<gold-phone-input label="Input 2" value="{{phoneNumber}}"></gold-phone-input>

Then usage of PaperInputBehavior.updateValueAndPreserveCaret inside _onValueChanged observer causes after any user input the caret to bug and reset its position always back to beginning (start) of the input, so user effectively types in RTL direction.

IMHO the issue is caused by the fact that change in value of one input triggers change in the other input, which triggers change back. The subsequent changes detect no caret positions (this.$.input.selectionStart equals to 0) and therefore the position resets back to the beginning of the input.

Quick workaround that prevents the issue from happening is adding a check at the beginning of the _onValueChanged observer for input focus (this.focused === true), therefore preventing the observer code from being executed unless user actually has focus on the input and is typing in the specific element instance.

Issue occurs in Chrome (50) on Linux (Ubuntu 16.04), doesn't occur under Firefox (46) on the same OS.

Expected outcome

Caret position follows user input naturally.

Actual outcome

Caret gets reset to initial position (start of the input).

Steps to reproduce

1. Put 2 gold-email-input elements into the page.
2. Bind the same variable to both inputs.
3. Start typing into one of the elements.

It's a proposal. What do you think about expose a method to get the international phone number format. I mean the value prefixed by the country code.

Example:

var value = goldPhoneInput.value;
console.log(value); // "2-32-32-32-32"

var internationalValue = goldPhoneInput.internationalValue();
console.log(internationalValue); // "+(32)2-32-32-32-32"

Please, tell me if it's a good idea or not and why. 🎓

gold-phone-input's label is currently aligned above the local part of the number, leaving a space above the country code, so if you have a series of paper-inputs one on each line, the phone input's label can look not-aligned with the others:

http://jsbin.com/sidifu/1/edit?html,output

What do you think?

I want to be able to nest a paper-icon-button inside a gold-phone-input as to be able to clear out the input. I have an 'X' btn that calls a function that clears out the input when clicked.

Actual outcome
The paper-icon-button does not show.

Expected outcome
The paper-icon-button would show just as it does when nesting it inside a paper-input

Steps to reproduce

1. Create a gold-phone-input
2. Nest a paper-icon-button
3. Open a browser

Browsers Affected

• [ X ] Chrome
• [ X ] Firefox
• [ X ] Safari 9
• [ X ] Safari 8
• [ X ] Safari 7
• [ X ] Edge
• [ X ] IE 11
• [ X ] IE 10

It appears the 2.0-preview branch has not been updated and is still pointing to polymer#^2.0.0-rc.2 and other outdated dependencies. Since Polymer 2.0 has been released almost 2 months now - are you going to update it and merge into the master?

Web Component Tester is throwing done() called multiple times error for a cloned PolymerElements/gold-phone-input element.

Please see the link below for error details.
[https://travis-ci.org/cherukumilli/gold-phone-input/builds/105506254]

Steps to recreate the problem on your local environment:

• git clone [email protected]:PolymerElements/gold-phone-input.git
• bower install
• wct

You will see errors like: (please see the link above for all the errors)

chrome 48                ✖ test/basic.html » basic » empty required input shows error on blur
  done() called multiple times
    <unknown> at   Suite.<anonymous> at basic.html:81:0
    <unknown> at           <unknown> at basic.html:46:0

gold-phone-input's code is not following the same standards as other elements. gold-phone-input's javascript code is outside the . All other elements have javascript code inside the tags

Current gold-phone-input code:

...
<dom-module>
   ...
</dom-module>
<script>
   ...
</script>

Expected:

...
<dom-module>
   ...
   <script>
      ...
   </script>
</dom-module>

A similar issue has been fixed for other elements like paper-fab. Please check PolymerElements/paper-fab#53 for details.

Description

Documentation states "change" should be fired when the input changes due to user interaction.

Expected outcome

'change' event should be fired.

Actual outcome

No 'change' event seen.

Steps to reproduce

Use element as below:
<gold-phone-input label="" country-code="44" phone-number-pattern="XXXX-XXX-XXX" auto-validate on-change="_inputHasChanged"

_inputHasChanged is never called.

With a listeners
listeners: {
'change': '_inputHasChanged',
},

_inputHasChanged is never called.

Similar issues seen with gold-email-input.

Browsers Affected

• [ x] Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10
  Not tested on other browsers.

When opening an app that contains this element, IE11 throws an error

Expected outcome

No error :)

Actual outcome

Live Demo

https://tts-dev.competence.biz/

Steps to reproduce

Put this on the page:

Build with polymer build
Deploy unbundled files
Visit with IE11

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Looks like internationalValue property doesn't work, it's always empty.

Here is how to reproduce the problem:

<gold-phone-input
  country-code="7"
  value="{{phoneValue}}"
  international-value="{{phoneInternationalValue}}">
</gold-phone-input>

<p>phoneValue: [[phoneValue]]</p>

<p>phoneInternationalValue: [[phoneInternationalValue]]</p>

Checking out the examples, if I input more than 10 numbers, the phone number formatting breaks (all hyphens are removed). Once more than 10 characters are entered, you can no longer backspace/delete below 10 without selecting all first and then pressing delete. Tested on Chrome 43.

_onValueChanged may throw 'TypeError: Cannot read property 'replace' of undefined' exception if binding to value returns undefined.

Also the function makes use of both this.value property and value argument. It might be a good idea to stick with one for consistency.

Focus animation is not consistent across input fields, so keyboard focus is not visible. Please ensure the animation is consistent and that it is clear where focus is.

Contrast: The hint text and "phone number" text is too light.

Audit results:
[Severe] Controls and media elements should have labels (4)
[Warning] Text elements should have a reasonable contrast ratio (3)
Not applicable tests (9)
Passing tests (6)

Since not all phone numbers are direct dial, I request functionality for an optional extension. Any digits entered after the "usual number of digits in a phone number" should be separated from the standard phone number by an 'x'.

On chrome for iPad, iOS 8.1.

It looks like gold-phone-input only allows the country code to be set programmatically; it does not allow the user to set or change it.

Strangely the docs don't currently mention this, or whether it's an intended limitation, but I'm hoping it's not. Is there future support planned for allowing users to change the country code?

I notice that Google's own account signup page features a nice "Mobile phone" input widget which allows the user to set the country code using a special dropdown (with country flag UI and keyboard acceleration). Is there any relationship between Google's non-Polymer UI elements, and ones in Polymer? In general, can Polymer users expect additional features like this to make their way back into Polymer?

Thanks and hope this helps the Polymer project and community.

_onValueChanged throws the error replace is not a function when binding to a variable that is a Number type.

Example:

var myValue = 1234567890;

...

<gold-phone-input value="{{myValue}}">

Phone numbers are often stored as an int/number and passed to the element in that format. The element should accept a valid number or string.

This issue is related to issue #37.