From c8015c88c3ec07a203e399ecb9edabf2f5811930 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 16 Feb 2016 10:13:40 +0800
Subject: [PATCH] feat: scroll to invalid field automatically #993

---
 components/form/demo/validate-other.md | 6 ++----
 components/form/index.jsx              | 4 ++--
 components/form/index.md               | 1 +
 components/input/index.jsx             | 7 ++++++-
 package.json                           | 2 +-
 style/components/form.less             | 3 +++
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index 80c049eb5e..c82fb3e3fa 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -2,9 +2,7 @@
 
 - order: 12
 
-提供以下组件表单域的校验。
-
-`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。
+提供以下组件表单域的校验：`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`，进行校验，可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
 
 ---
 
@@ -23,7 +21,7 @@ let Demo = React.createClass({
 
   handleSubmit(e) {
     e.preventDefault();
-    this.props.form.validateFields((errors, values) => {
+    this.props.form.validateFieldsAndScroll((errors, values) => {
       if (!!errors) {
         console.log('Errors in form!!!');
         return;
diff --git a/components/form/index.jsx b/components/form/index.jsx
index 25c693f512..f34cdc3831 100644
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@@ -2,7 +2,7 @@ import Form from './Form';
 import FormItem from './FormItem';
 import ValueMixin from './ValueMixin';
 import Input from '../input';
-import { createForm } from 'rc-form';
+import createDOMForm from 'rc-form/lib/createDOMForm';
 
 Form.create = (o = {}) => {
   const options = {
@@ -11,7 +11,7 @@ Form.create = (o = {}) => {
     fieldMetaProp: '__meta',
   };
 
-  return createForm(options);
+  return createDOMForm(options);
 };
 Form.Item = FormItem;
 
diff --git a/components/form/index.md b/components/form/index.md
index 935b3faf06..2ff7a65c9d 100644
--- a/components/form/index.md
+++ b/components/form/index.md
@@ -75,6 +75,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | setFieldsValue | 设置一组输入控件的值 | Function(obj: object) | | |
 | setFields | 设置一组输入控件的值与 Error | Function(obj: object) | | |
 | validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) | | |
+| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` | | |
 | getFieldError | 获取某个输入控件的 Error | Function(name) | | |
 | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | |
 | resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | | |
diff --git a/components/input/index.jsx b/components/input/index.jsx
index 9bb54870bd..e6d5e4b149 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import assign from 'object-assign';
+import classNames from 'classnames';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
@@ -54,8 +55,12 @@ class Input extends React.Component {
       </span>
     ) : null;
 
+    const className = classNames({
+      [`${props.prefixCls}-input-wrapper`]: true,
+      [wrapperClassName]: (addonBefore || addonAfter),
+    });
     return (
-      <span className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
+      <span className={className}>
         {addonBefore}
         {children}
         {addonAfter}
diff --git a/package.json b/package.json
index 4b5ad50ad6..f68bc1205a 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "rc-collapse": "~1.4.4",
     "rc-dialog": "~5.3.1",
     "rc-dropdown": "~1.4.3",
-    "rc-form": "~0.12.1",
+    "rc-form": "~0.13.0",
     "rc-form-validation": "~2.5.0",
     "rc-input-number": "~2.4.1",
     "rc-menu": "~4.10.2",
diff --git a/style/components/form.less b/style/components/form.less
index 6ba8d870cf..72951220ca 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -21,6 +21,9 @@ label {
 }
 
 // Input styles
+.@{css-prefix}input-wrapper {
+  display: block;
+}
 .@{css-prefix}input {
   .input;
 }