Fix valid selector error of form, close ant-design#7693

oscarnevarezleal · Sep 21, 2017 · 3d1914f · 3d1914f
1 parent 5d7ef9d
commit 3d1914f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import Animate from 'rc-animate';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import Row from '../grid/row';
 import Col, { ColProps } from '../grid/col';
@@ -125,11 +126,15 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   renderHelp() {
     const prefixCls = this.props.prefixCls;
     const help = this.getHelpMsg();
-    return help ? (
-      <div className={`${prefixCls}-explain`} key="help">
-        {help}
-      </div>
-    ) : null;
+    const children = help ? (
+        <div className={`${prefixCls}-explain`} key="help">
+          {help}
+        </div>
+      ) : null;
+    return (
+      <Animate transitionName="show-help" component="" transitionAppear key="help">
+        {children}
+      </Animate>);
   }
 
   renderExtra() {
@@ -220,10 +225,10 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     if (!id) {
       return;
     }
-    const controls = document.querySelectorAll(`#${id}`);
+    const controls = document.querySelectorAll(`[id="${id}"]`);
     if (controls.length !== 1) {
       e.preventDefault();
-      const control = findDOMNode(this).querySelector(`#${id}`) as HTMLElement;
+      const control = findDOMNode(this).querySelector(`[id="${id}"]`) as HTMLElement;
       if (control && control.focus) {
         control.focus();
       }

diff --git a/components/form/__tests__/label.test.js b/components/form/__tests__/label.test.js
@@ -73,4 +73,20 @@ describe('Form', () => {
     wrapper.find('Form label').at(1).simulate('click');
     expect(wrapper.find('Form input').at(1).node).toBe(document.activeElement);
   });
+
+  // https://github.com/ant-design/ant-design/issues/7693
+  it('should not throw error when is not a valid id', () => {
+    const Form1 = Form.create()(({ form }) => (
+      <Form>
+        <Form.Item label="label 1">
+          {form.getFieldDecorator('member[0].name.firstname')(<input />)}
+        </Form.Item>
+      </Form>
+    ));
+    const wrapper = mount(<Form1 />);
+    expect(() => {
+      wrapper.find('Form label').at(0).simulate('click');
+    }).not.toThrow();
+    expect(wrapper.find('Form input').at(0).node).toBe(document.activeElement);
+  });
 });