Form input name='nodeName' breaks onSubmit event handling #6284
Comments
|
Ah, nice find. The issue is that |
|
@zpao That was my first thought too, in which case we could special-case window, but I don't think that's quite right. I think the issue occurs as we traverse the DOM hierarchy for the purposes of synthetically bubbling the event. We are hitting the In |
|
Yea, I updated my comment and mentioned the form. Otherwise window properties are due to ids, not name, whereas form properties are there for names. Maybe something with the iframes + debugger screwed me up. |
|
So what we could do is instead of ever checking nodeName is do function shouldUseChangeEvent(elem) {
return (
elem instanceof HTMLSelectElement ||
(elem instanceof HTMLInputElement && elem.type === 'file')
);
}The risk is that we're in an environment that doesn't have the globals we expect. Maybe we read them from |
|
The following code will cause the same error: <input id="nodeName" />It seems that jQuery had met the same issue and fixed, see: http://stackoverflow.com/questions/17329025/is-id-nodename-reserved-in-html5 |
|
I write this code: var form = document.createElement('form');
var input = document.createElement('input');
input.setAttribute('id', 'nodeName');
form.appendChild(input);
console.log(form);run the code on chrome, I think this is a browser bug. |
it maybe a bug of chrome. the input has the id or name of 'nodeName' will override the nodeName of parent form. but it won't affect the render of page。 but in react， if the outermost layer element is the form, react will check the nodeName ,so will throw error:
|
|
+1, same problem here. cc related: ant-design/ant-design#2950, ant-design/ant-design#2103 const formFields = [
{ input: 'text', title: '节点名称', key: 'nodeName', required: true },
// ...
]
<Form.Item key={item.key} label={item.title}>
{getFieldDecorator(item.key, {
initialValue: (defaults || {})[item.key],
rules: [{
required: item.required,
message: '请填写必填项',
}],
})(
<Input />
)}
</Form.Item>Workaround: avoid naming with the keyword const formFields = [
// Form input name='nodeName' breaks onSubmit event handling
// https://github.com/facebook/react/issues/6284
{ input: 'text', title: '节点名称', key: 'nodeName_fix', required: true },
// ...
]
function toEditModel(obj) {
const ret = _.cloneDeep(obj);
// ...
['nodeName'].forEach((k) => {
const v = ret[k];
ret[`${k}_fix`] = v;
});
return ret;
}
function fromEditModel(obj) {
const ret = _.cloneDeep(obj);
// ...
['nodeName'].forEach((k) => {
const v = ret[`${k}_fix`];
ret[k] = v;
});
return ret;
} |
|
I have found a similar issue with using function App() {
return (
<>
<div style={{backgroundColor: 'red'}}>
<input id="style" defaultValue="should have a red background"/>
</div>
<form style={{backgroundColor: 'green'}}>
<input id="style" defaultValue="my background wont be green"/>
</form>
<form style={{backgroundColor: 'blue'}}>
<input id="stylez" defaultValue="should have a blue background"/>
</form>
</>
);
}The middle form can't set it's inline styles because a child element occupies the form property
|
It happened that I stumbled on following edge case. If you add
name='nodeName'attribute to form's input, at some point of React event handling (ChangeEventPlugin.js: shouldUseChangeEvent()) it will call:elem.nodeName && elem.nodeName.toLowerCase(), but coincidentallynodeNameproperty refers to input and invocation fails.Here's a jsFiddle example
The text was updated successfully, but these errors were encountered: