Web.Components: EmailInput: changed input type to 'text'. Reason: unstable working with type 'email'.

Bugs in react:
https://github.com/facebook/react/issues/14168
https://github.com/facebook/react/issues/6368
This commit is contained in:
Daniil Senkiv 2019-10-31 13:31:39 +03:00
parent c94a3a005d
commit 9928067a41

View File

@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import isEqual from "lodash/isEqual"; import isEqual from "lodash/isEqual";
import TextInput from '../text-input' import TextInput from '../text-input'
import { EmailSettings, parseAddress, checkAndConvertEmailSettings, isEqualEmailSettings } from '../../utils/email/'; import { EmailSettings, parseAddress, checkAndConvertEmailSettings, isEqualEmailSettings } from '../../utils/email/';
import punycode from 'punycode';
const borderColor = { const borderColor = {
default: '#D0D5DA', default: '#D0D5DA',
@ -79,9 +78,7 @@ class EmailInput extends React.Component {
onChangeAction = (e) => { onChangeAction = (e) => {
this.props.onChange && this.props.onChange(e); this.props.onChange && this.props.onChange(e);
// Google Chrome doesn't support IDN for TLDs and is converting them to Punycode. There is variable 'inputValue' against Chrome`s converting this.props.customValidateFunc ? this.props.customValidateFunc(e) : this.checkEmail(e.target.value);
const inputValue = punycode.toUnicode(e.target.value);
this.props.customValidateFunc ? this.props.customValidateFunc(e) : this.checkEmail(inputValue);
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
@ -100,7 +97,7 @@ class EmailInput extends React.Component {
isValidEmail={isValid || isValidEmail} isValidEmail={isValid || isValidEmail}
value={inputValue} value={inputValue}
onChange={this.onChangeAction} onChange={this.onChangeAction}
type='email' type='text'
onValidateInput={onValidateInput} onValidateInput={onValidateInput}
{...rest} {...rest}
/> />