fix: Form.Item的name属性改为parentNode，dom-align 死循环，内存溢出的bug (ant-design#…

…31846)

* Form.Item的name属性改为parentNode，dom-align 死循环，内存溢出的bug

* Form.Item的name属性改为parentNode，dom-align 死循环，内存溢出的bug

* fixed lint issues.

* change: add black list for form item name

* keep the definition the same as before

* update snapshot

* change formItemNameBlackList type to array

* add test case for form item is in black list

* add test condition

* prettier it

* change: add black list for form item name

* keep the definition the same as before

* merege from upstream

* rebase this branch

* change formItemNameBlackList type to array

* add test case for form item is in black list

* add test condition

* prettier it

* fix test case that casing by rebase

components/form/__tests__/index.test.js

@@ -1,10 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import Form from '..';
+import * as Util from '../util';
+
 import Input from '../../input';
 import Button from '../../button';
+import Select from '../../select';
+
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
@@ -831,7 +835,7 @@ describe('Form', () => {
  _internalItemRender={{
  mark: 'pro_table_render',
  render: (_, doms) => (
- <div id="test">
+ <div id="_test">
  {doms.input}
  {doms.errorList}
  {doms.extra}
@@ -843,7 +847,62 @@ describe('Form', () => {
  </Form.Item>
  </Form>,
  );
- expect(wrapper.find('#test').exists()).toBeTruthy();
+ expect(wrapper.find('#_test').exists()).toBeTruthy();
+ });
+
+ it('Form Item element id will auto add form_item prefix if form name is empty and item name is in the black list', async () => {
+ const mockFn = jest.spyOn(Util, 'getFieldId');
+ const itemName = 'parentNode';
+ // mock getFieldId old logic,if form name is empty ,and item name is parentNode,will get parentNode
+ mockFn.mockImplementation(() => itemName);
+ const { Option } = Select;
+ const Demo = () => {
+ const [open, setOpen] = useState(false);
+ return (
+ <>
+ <Form>
+ <Form.Item name={itemName}>
+ <Select
+ className="form_item_parentNode"
+ defaultValue="lucy"
+ open={open}
+ style={{ width: 120 }}
+ >
+ <Option value="jack">Jack</Option>
+ <Option value="lucy">Lucy</Option>
+ <Option value="Yiminghe">yiminghe</Option>
+ </Select>
+ </Form.Item>
+ </Form>
+ <button
+ type="button"
+ onClick={() => {
+ setOpen(true);
+ }}
+ >
+ {open ? 'show' : 'hidden'}
+ </button>
+ </>
+ );
+ };
+
+ const wrapper = mount(<Demo />, { attachTo: document.body });
+ expect(mockFn).toHaveBeenCalled();
+ expect(Util.getFieldId()).toBe(itemName);
+
+ // make sure input id is parentNode
+ expect(wrapper.find(`#${itemName}`).exists()).toBeTruthy();
+ act(() => {
+ wrapper.find('button').simulate('click');
+ });
+ expect(wrapper.find('button').text()).toBe('show');
+
+ mockFn.mockRestore();
+ // https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/update.html
+ // setProps instead of update
+ wrapper.setProps({});
+ expect(wrapper.find(`#form_item_${itemName}`).exists()).toBeTruthy();
+ wrapper.unmount();
  });
 
  describe('tooltip', () => {

components/form/util.ts

@@ -1,5 +1,12 @@
 import { InternalNamePath } from './interface';
 
+// form item name black list. in form ,you can use form.id get the form item element.
+// use object hasOwnProperty will get better performance if black list is longer.
+const formItemNameBlackList = ['parentNode'];
+
+// default form item id prefix.
+const defaultItemNamePrefixCls: string = 'form_item';
+
 export function toArray<T>(candidate?: T | T[] | false): T[] {
  if (candidate === undefined || candidate === false) return [];
 
@@ -10,5 +17,12 @@ export function getFieldId(namePath: InternalNamePath, formName?: string): strin
  if (!namePath.length) return undefined;
 
  const mergedId = namePath.join('_');
- return formName ? `${formName}_${mergedId}` : mergedId;
+
+ if (formName) {
+ return `${formName}_${mergedId}`;
+ }
+
+ const isIllegalName = formItemNameBlackList.indexOf(mergedId) >= 0;
+
+ return isIllegalName ? `${defaultItemNamePrefixCls}_${mergedId}` : mergedId;
 }