diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 5123ad4d15..e0e4a1ed83 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -302,16 +302,18 @@ export default class FormItem extends React.Component { if (!id) { return; } - const controls = document.querySelectorAll(`[id="${id}"]`); - if (controls.length !== 1) { + + const formItemNode = ReactDOM.findDOMNode(this) as Element; + const control = formItemNode.querySelector(`[id="${id}"]`) as HTMLElement; + + if (control) { // Only prevent in default situation // Avoid preventing event in `label={link}`` if (typeof label === 'string') { e.preventDefault(); } - const formItemNode = ReactDOM.findDOMNode(this) as Element; - const control = formItemNode.querySelector(`[id="${id}"]`) as HTMLElement; - if (control && control.focus) { + + if (control.focus) { control.focus(); } } diff --git a/components/form/__tests__/label.test.js b/components/form/__tests__/label.test.js index 86c69bc704..cba6dcb93c 100644 --- a/components/form/__tests__/label.test.js +++ b/components/form/__tests__/label.test.js @@ -3,6 +3,27 @@ import { mount } from 'enzyme'; import Form from '..'; describe('Form', () => { + // Mock of `querySelector` + const originQuerySelector = HTMLElement.prototype.querySelector; + HTMLElement.prototype.querySelector = function(str) { + const match = str.match(/^\[id=('|")(.*)('|")]$/); + const id = match && match[2]; + + // Use origin logic + if (id) { + const input = this.getElementsByTagName('input')[0]; + if (input.id === id) { + return input; + } + } + + return originQuerySelector.call(this, str); + }; + + afterAll(() => { + HTMLElement.prototype.querySelector = originQuerySelector; + }); + it('should remove duplicated user input colon', () => { const wrapper = mount(