Comments (7)
I actually have a similar issue with nested forms I'm currently use onSubmitFail to solved.
export default reduxForm(
{
form: 'TaskEditForm',
fields,
validate,
onSubmitFail: (errors) => {
let keys = Object.keys(errors);
for (let i = 0; i < keys.length; i++) {
var key = keys[i];
let index = 0;
//for array
if (_.isArray(errors[key]) && errors[key].length > 0) {
for (var j = 0; j < errors[key].length; j++) {
let item = errors[key][j];
let t;
if ((t = Object.keys(item)).length > 1) {
index = item.index;
key = t[0] == 'index' ? t[1] : t[0];
break;
}
}
}
let elements = document.getElementsByName(key);
if (elements.length > 0) {
elements[index].focus();
break;
}
}
}
}
)(TaskEditComponent);
from redux-form.
I can't get this to work. Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).
Is there any way you could generate a jsfiddle or something?
from redux-form.
I forgot just how much boilerplate was needed to get it running.
Anyway, I had a dig and it seems to be that when the parent <Component>
is @connect
ed it breaks the dynamic form.
I've put together a demo repo which shows both hard coded and dynamic forms in both conencted and unconnected containers.
https://github.com/rockingskier/redux-form-issue
from redux-form.
Thanks for mocking that up. Made it a lot easier to debug.
Here's a PR that fixes the problem.
from redux-form.
Ah of course! So stupid! Thank you for looking at that. I was only passing the whole state to start with but I should it should have been {...state} anyway.
from redux-form.
@erikras I actually have a similar issue with nested forms I'm currently trying to implement.
I guess the issue that @rockingskier have is that all the virtual-dom is recalculated because the state changed and I think the DOM changed too, so the field you focus on is not actually the same.
I had a real performance issue (1s hang for each typed character) with a form with a nested form, because each field object actually changed because of handleBlur function and other functions that are recreated each time, so they are not equal!
I fixed it by writing a shouldPureComponentUpdate function :
const IGNORE_FUNCTIONS = [
'onChange', 'onBlur', 'onFocus',
'handleChange', 'handleBlur', 'handleFocus']
export function shallowEqual(objA, objB) {
if (objA === objB) {
return true
}
if (typeof objA !== 'object' || objA === null ||
typeof objB !== 'object' || objB === null) {
return false
}
const keysA = Object.keys(objA)
const keysB = Object.keys(objB)
if (keysA.length !== keysB.length) {
return false
}
// Test for A's keys different from B.
const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB)
for (let i = 0; i < keysA.length; i++) {
if (!bHasOwnProperty(keysA[i])) {
return false
}
if (keysA[i] === 'field') {
if (!shallowEqual(objA[keysA[i]], objB[keysA[i]])) {
return false
}
} else if (typeof objA[keysA[i]] === 'function' &&
IGNORE_FUNCTIONS.indexOf(keysA[i]) > -1 ) {
// don't compare onChange, onBlur, onFocus, handleChange,
// handleBlur, handleFocus
continue
} else if (objA[keysA[i]] !== objB[keysA[i]]) {
// console.log('rerender because of prop named:')
// console.log(keysA[i])
// console.log('before:')
// console.log(objA[keysA[i]])
// console.log('after:')
// console.log(objB[keysA[i]])
return false
}
}
return true
}
export default function shouldPureComponentUpdate(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState)
}
that I assign to my Field component like this:
class Field extends Component {
static propTypes = {
field: PropTypes.object.isRequired,
}
shouldComponentUpdate = shouldPureComponentUpdate
from redux-form.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from redux-form.
Related Issues (20)
- meat.error
- Redux Form 8.3.6 - Huge form Sluggish HOT 1
- Form submission canceled because the form is not connected.
- syncError is not recognizing unrecognized Fields
- Malicious code on api documentation site HOT 5
- Inline validate causing infinite loop (Maximum update depth exceeded)
- redux-form/examples HOT 4
- Using connect from react-redux with reduxForm HOC throws an error
- Radio field never gets touched with MUI - cannot validate
- how to select form value and put condition accordingly field array in redux form
- error UNSAFE_componentWillReceiveProps and UNSAFE_componentWillMount
- [Bug] : Redirect to Github link is broken
- Support React 18 HOT 9
- Multiple button needs reference in fieldArray onClick={() => fields.push({})}
- Scrollbar jumps on wizard example
- Support react-redux 8.x.x HOT 4
- validate does not trigger with new initialValues HOT 9
- Component mounts twice after going to different page from redux form
- Text characters are getting deleted in TextArea on iOS
- Security Vulnerability with Lodash version 4.17.15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-form.