-
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