- Added
.react-phone-number-input--focus
CSS class. Issue.
- Changed the output of
AsYouType
formatter. E.g. before forUS
and input21
it was outputting(21 )
which is not good for phone number input (not intuitive and is confusing). Now it will not add closing braces which haven't been reached yet by the input cursor and it will also strip the corresponding opening braces, so forUS
and input21
it now is just21
, and for213
it is(213)
.
- Lowered React requirements back to
0.14
(same as for version 1.x of this library).
-
(breaking change)
/native
is now the default export.react-responsive-ui
select is now exported asreact-phone-number-input/react-responsive-ui
. -
(breaking change) Migrated
react-responsive-ui
country select from0.10
to0.13
. It no longer has text input functionality (like "autocomplete") — it's just a<select/>
now, without any text input field. Removedrrui.css
file (usereact-responsive-ui/style.css
bundle instead, or import styles individually fromreact-responsive-ui/styles
). RenamedmaxItems
property toscrollMaxItems
. RemovedcountrySelectToggleClassName
property (unused). -
(breaking change)
smartCaret
is nowfalse
by default (previously wastrue
). This was done because some Samsung Android phones were having issues withsmartCaret={true}
(which was the default in version1.x
).smartCaret
has been removed for now, so that it doesn't includeinput-format
library code. -
(breaking change)
international
property is nowtrue
by default meaning that by default there will always be the "International" option in the country<select/>
. -
(breaking change) CSS changes: renamed
.react-phone-number-input__phone--native
CSS class to.react-phone-number-input__phone
, added new.react-phone-number-input__input
CSS class (the phone input). -
(breaking change) Removed undocumented exports.
-
(breaking change) For
/custom
componentlabels
andinternationalIcon
properties are now required (previously werereact-phone-number-input/locales/default.json
andreact-phone-number-input/commonjs/InternationalIcon
by default). -
(breaking change) Removed
/resources
directory (due to not being used).
- Added
react-phone-number-input/basic-input
component.
- Some CSS tweaks and code refactoring.
-
Added an isolated
react-phone-number-input/native
export (so that it doesn't includereact-responsive-ui
package in the resulting bundle). -
Some CSS tweaks.
-
countrySelectComponent
onToggle
property renamed tohidePhoneInputField
.
-
Added
PhoneInputNative
exported component which deprecateds the oldnativeCountrySelect={true/false}
property.PhoneInputNative
component doesn't requirerrui.css
. It will be the default exported component in version2.x
. -
Fixed a minor bug appering in React 16.4 which caused the currently selected country flag to be reset while typing.
- Added an optional
smartCaret={false}
property for fixing Samsung Android phones.
-
(breaking change) Changed the properties passed to a custom
inputComponent
, seeInput.js
propTypes
for more info. -
Added
BasicInput
: an alternativeinputComponent
for working around the Samsung Galaxy caret positioning bug.
-
(breaking change) Rewrote
Input.js
— there is a possibility that something could potentially break for users coming from previous versions. -
(breaking change) No longer exporting
libphonenumber-js
functions. -
(breaking change)
dictionary
's"International"
key renamed to"ZZ"
. -
(breaking change)
dictionary
property renamed tolabels
. -
(breaking change)
nativeExpanded
property renamed tonativeCountrySelect
. -
(breaking change)
selectTabIndex
property renamed tocountrySelectTabIndex
. -
(breaking change)
selectMaxItems
property renamed tocountrySelectMaxItems
. -
(breaking change)
selectAriaLabel
property renamed tocountrySelectAriaLabel
. -
(breaking change)
selectCloseAriaLabel
property renamed tocountrySelectCloseAriaLabel
. -
(breaking change)
selectComponent
property renamed tocountrySelectComponent
-
(breaking change)
flagComponent
'scountryCode
property was renamed to justcountry
. -
(breaking change) Renamed
countries with flags.js
toflags.js
and put them in the root folder. -
(breaking change)
flags
property changed: it can no longer be aboolean
and can only be an object of flagReact.Component
s. -
(breaking change)
selectStyle
andinputStyle
properties removed (due to not being used). -
(breaking change)
inputTabIndex
property removed (usetabIndex
instead). -
(breaking change)
onCountryChange
property removed (no one actually used it). -
(breaking change)
convertToNational
property renamed todisplayInitialValueAsLocalNumber
. -
(breaking change)
style.css
changed a bit (to accomodate phone number extension field). -
(breaking change) If someone did override
.rrui__input:not(.rrui__input--multiline)
CSS rule then now it has been split into two CSS rules:.rrui__input
and.rrui__input--multiline
. -
Added
locale
s for thelabels
property (ru
anden
). -
Added
ext
property for phone number extension input.
-
(breaking change) Fixed SVG flag icons for IE. This alters the markup a bit:
<img/>
is now wrapped in a<div/>
and the CSS class of the image becomes the CSS class of the div and also a new CSS class for the image is added. This could hypothetically be a breaking change in some advanced use cases hence the major version bump. -
Fixed
<Select/>
scrolling to the top of the page in IE <= 11. -
Fixed validation error margin left.
- Updated
libphonenumber-js
to1.0.x
. parsePhoneNumber()
,isValidPhoneNumber()
andformatPhoneNumber()
no longer acceptundefined
phone number argument: it must be either astring
or a parsed numberobject
having astring
phone
property.
-
Added
error
andindicateInvalid
properties for displaying error label. -
(CSS breaking change)
react-phone-number-input
<div/>
is now wrapped by another<div/>
and its CSS class name changed toreact-phone-number-input__row
andreact-phone-number-input
CSS class name goes to the wrapper.
- Returning
<input/>
type
back totel
. There used to be reports previously thatinput="tel"
<input/>
s on some non-stock Android devices with non-stock keyboards had issues with proper caret positioning during input. Well, those are non-stock Android bugs and therefore they should fix those there.type="tel"
is better in terms of the digital input keyboard so it's now a default. Still can be overridden by passingtype="text"
property.
This release contains some minor CSS class names refactoring which most likely won't introduce any issues in almost but all use cases.
(CSS breaking change) Refactored <Select/>
CSS class names in react-responsive-ui
:
-
.rrui__select__selected--autocomplete
->.rrui__select__autocomplete
-
.rrui__select__selected
->.rrui__select__button
-
.rrui__select__selected--nothing
->.rrui__select__button--empty
-
.rrui__select__selected--expanded
->.rrui__select__button--expanded
-
.rrui__select__selected--disabled
->.rrui__select__button--disabled
(CSS breaking change) Added .rrui__text-input__input
CSS class to the phone number <input/>
.
(CSS breaking change) Added global .rrui__text-input__input
styles to style.css
- Due to the reports stating that
type="tel"
caret positioning doesn't work on Samsung devices the component had to revert back totype="text"
by default (one can passtype="tel"
property directly though).
- (breaking change) The default value of
convertToNational
property changed fromtrue
tofalse
. The reason is that the newer generation grows up when there are no stationary phones and therefore everyone inputs phone numbers with a+
in their smartphones so local phone numbers should now be considered obsolete.
- Now alphabetically sorting the supplied custom country names
- Fixed a bug when
value
was not set toundefined
when the<input/>
value was empty - Added
selectMaxItems
property for customizing the country select height
- (CSS breaking change) Removed vertical padding from the first and the last
<Select/>
<li/>
options and moved it to.rrui__select__options
<ul/>
itself. So if someone customized.rrui__select__options-list-item:first-child
and.rrui__select__options-list-item:last-child
vertical padding then those padding customizations should be moved to.rrui__select__options
itself. - (CSS breaking change) Added
.rrui__select__option:hover
and.rrui__select__option--focused:hover
background color for better UX.
- (might be a breaking change) Slightly refactored the component CSS improving it in a couple of places along with adding comments to it (see
style.css
). - Added country code validation.
- (breaking change) Moved the
.css
file to the root folder of the package and split it into two files (therrui
one is not required when already usingreact-responsive-ui
).import
ing the CSS file via Webpack is the recommended way to go now. - (breaking change) Vendor prefixes dropped in favour of manually using autoprefixers.
- Added support for externally changing
value
property
- Added
inputTabIndex
andselectTabIndex
settings
- Added
nativeExpanded
setting for native country<select/>
- The
.valid
property has been removed from "as you type" formatter, therefore dropping the.react-phone-number-input__phone--valid
CSS class. This doesn't affect functionality in any way nor does it break existing code therefore it's a "patch" version upgrade.
- (could be a breaking change) Moving CSS positioning properties from inline styles to the CSS file therefore if using an edited CSS file from older versions (when not doing it via Webpack
require(...)
) update styles for.rrui__select
and.rrui__select__options
. As well as.rrui__expandable
and.rrui__shadow
have been added. Maybe (and most likely) something else, so better re-copy the entire CSS file.
- Fixed a small bug when an initially passed phone number
value
wasn't checked for country autodetection - A small enhancement: when an international phone number is erased to a single
+
then the currently selected country is reset. And, analogous, when a country is selected, and the input is empty, and then the user enters a single+
sign — the country is reset too.
- Fixed a small bug when the
country
property was set after page load programmatically and that caused the input taking focus (which displayed a keyboard on mobile devices)
@JeandeCampredon
fixedConst declarations are not supported in strict mode
in module exports
- Added custom metadata feature (now developers have a way to reduce the resulting bundle size in case they decide they need that)
lockCountry
property removed (usecountries={[country]}
instead)- Added
international
boolean property to explicitly indicate whether to show the "International" option in the list of countries - Not showing country
<Select/>
whencountries.length === 1
orcountries.length === 0
countries
property can now only be an array of country codes
- Fixed the flags bug introduced by adding
flags={ false }
option
- Added
flags={ false }
option
- Added
lockCountry
option - Added a possibility to specify
countries
as an array of country codes - Fixed country selection on
country
property update
- Optimized performance on mobile devices
- Added a bunch of CSS classes:
react-phone-number-input
,react-phone-number-input--valid
,react-phone-number-input__country
,react-phone-number-input__phone
,react-phone-number-input__phone--valid
- Now hiding the phone input while the country select is open
- Fixed collapsed select options being interactive in iOS 8 Safari
- A complete rewrite. Now supports all countries, all formats are hard-coded from Google Android's
libphonenumber
library.
- Hong Kong phone numbers fix by @nchan0154
- Added some popular country formats (and stubs for other countries)
- Small bug fix for trunk prefixed phone numbers
format
prop is now not required for the React component. Ifformat
is not specified then the input switches itself into "auto" (iPhone style) mode.- input code rewrite
- (breaking change)
digits
passed to thetemplate()
function don't include trunk prefix anymore - Introduced custom
valid(digits)
phone number validation function for phone number format
-
format_phone_number
(akaformatPhoneNumber
) function now formats phone number internationally (with country code) if noformat
argument was supplied (it tries to autodetect the correct phone number format from the phone number itself) -
Added
country(phone)
function -
Added
country_from_locale(locale)
(akacountryFromLocale(locale)
) function
- Added
parse_phone_number
(akaparsePhoneNumber
) function
- Added
plaintext_local
(akaplaintextLocal
) andplaintext_international
(akaplaintextInternational
) methods
- Added custom phone formats
- Refactoring
- Removed
format_phone_number_international
(akaformatPhoneNumberInternational
)
- Added
disabled
property
- Added
name
property (for javascriptless websites)
- Initial release