polymerelements / gold-phone-input Goto Github PK
View Code? Open in Web Editor NEWAn input element that only allows phone numbers
Home Page: https://webcomponents.org/element/PolymerElements/gold-phone-input
An input element that only allows phone numbers
Home Page: https://webcomponents.org/element/PolymerElements/gold-phone-input
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.
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}}"
Value property is updated, value is formatted per the phoneNumberPattern
property
Value property is not updated
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.
<template is="dom-repeat" items="{{model}}" as="item">
<gold-phone-input value="{{item.phone}}"> </gold-phone-input>
</template>
should render 987-654-3210
,
Instead it renders 9876543210
.
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!
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="*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 = "";
}
}
(Issue based off Polymer website demo at time of entry)
gold-phone-input does not accept numbers typed via the numpad as valid.
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.
Caret position follows user input naturally.
Caret gets reset to initial position (start of the input).
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
Browsers Affected
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:
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
...
<dom-module>
...
</dom-module>
<script>
...
</script>
...
<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.
Documentation states "change" should be fired when the input changes due to user interaction.
'change' event should be fired.
No 'change' event seen.
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.
When opening an app that contains this element, IE11 throws an error
No error :)
https://tts-dev.competence.biz/
Put this on the page:
Build with polymer build
Deploy unbundled files
Visit with IE11
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.