Compare commits
4 Commits
master
...
sundas/INF
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9c3b7a6755 | ||
|
|
ffe306b60f | ||
|
|
30980242a3 | ||
|
|
83ad419a39 |
@@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Form, TransitionReplace,
|
Form, TransitionReplace,
|
||||||
@@ -7,9 +7,34 @@ import PropTypes from 'prop-types';
|
|||||||
|
|
||||||
const FormGroup = (props) => {
|
const FormGroup = (props) => {
|
||||||
const [hasFocus, setHasFocus] = useState(false);
|
const [hasFocus, setHasFocus] = useState(false);
|
||||||
|
const [inputValue, setInputValue] = useState(props.value || '');
|
||||||
|
const valueRef = useRef('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const input = document.getElementsByName(props.name)[0];
|
||||||
|
if (!input) { return undefined; }
|
||||||
|
|
||||||
|
const updateValue = () => {
|
||||||
|
if (input.value && input.value !== valueRef.current) {
|
||||||
|
valueRef.current = input.value;
|
||||||
|
setInputValue(input.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(updateValue); // Detect autofill on page load
|
||||||
|
|
||||||
|
input.addEventListener('input', updateValue);
|
||||||
|
input.addEventListener('focus', updateValue);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
input.removeEventListener('input', updateValue);
|
||||||
|
input.removeEventListener('focus', updateValue);
|
||||||
|
};
|
||||||
|
}, [props.name]);
|
||||||
|
|
||||||
const handleFocus = (e) => {
|
const handleFocus = (e) => {
|
||||||
setHasFocus(true);
|
setHasFocus(true);
|
||||||
|
setInputValue(inputValue || '');
|
||||||
if (props.handleFocus) { props.handleFocus(e); }
|
if (props.handleFocus) { props.handleFocus(e); }
|
||||||
};
|
};
|
||||||
const handleClick = (e) => {
|
const handleClick = (e) => {
|
||||||
@@ -19,6 +44,10 @@ const FormGroup = (props) => {
|
|||||||
setHasFocus(false);
|
setHasFocus(false);
|
||||||
if (props.handleBlur) { props.handleBlur(e); }
|
if (props.handleBlur) { props.handleBlur(e); }
|
||||||
};
|
};
|
||||||
|
const handleChange = (e) => {
|
||||||
|
setInputValue(e.target.value);
|
||||||
|
if (props.handleChange) { props.handleChange(e); }
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form.Group controlId={props.name} className={props.className} isInvalid={props.errorMessage !== ''}>
|
<Form.Group controlId={props.name} className={props.className} isInvalid={props.errorMessage !== ''}>
|
||||||
@@ -31,11 +60,11 @@ const FormGroup = (props) => {
|
|||||||
autoComplete={props.autoComplete}
|
autoComplete={props.autoComplete}
|
||||||
spellCheck={props.spellCheck}
|
spellCheck={props.spellCheck}
|
||||||
name={props.name}
|
name={props.name}
|
||||||
value={props.value}
|
value={inputValue}
|
||||||
onFocus={handleFocus}
|
onFocus={handleFocus}
|
||||||
onBlur={handleOnBlur}
|
onBlur={handleOnBlur}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
onChange={props.handleChange}
|
onChange={handleChange}
|
||||||
controlClassName={props.borderClass}
|
controlClassName={props.borderClass}
|
||||||
trailingElement={props.trailingElement}
|
trailingElement={props.trailingElement}
|
||||||
floatingLabel={props.floatingLabel}
|
floatingLabel={props.floatingLabel}
|
||||||
|
|||||||
@@ -618,6 +618,15 @@ describe('RegistrationPage', () => {
|
|||||||
...initialState,
|
...initialState,
|
||||||
register: {
|
register: {
|
||||||
...initialState.register,
|
...initialState.register,
|
||||||
|
registrationFormData: {
|
||||||
|
...registrationFormData,
|
||||||
|
formFields: {
|
||||||
|
name: 'test',
|
||||||
|
username: 'test',
|
||||||
|
email: 'test@example.com',
|
||||||
|
password: 'test',
|
||||||
|
},
|
||||||
|
},
|
||||||
backedUpFormData: { ...registrationFormData },
|
backedUpFormData: { ...registrationFormData },
|
||||||
},
|
},
|
||||||
commonComponents: {
|
commonComponents: {
|
||||||
|
|||||||
Reference in New Issue
Block a user