diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 2d908dedeb..14a1e91ecf 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -573,6 +573,64 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
+
+
+
+
+
+
+
+
+
`;
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index b86f163173..cb3e1b3174 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -18,10 +18,33 @@ Input.Group example
Note: You don't need `Col` to control the width in the `compact` mode.
````jsx
-import { Input, Col, Select, InputNumber, DatePicker, AutoComplete } from 'antd';
+import { Input, Col, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
const InputGroup = Input.Group;
const Option = Select.Option;
+const options = [{
+ value: 'zhejiang',
+ label: 'Zhejiang',
+ children: [{
+ value: 'hangzhou',
+ label: 'Hangzhou',
+ children: [{
+ value: 'xihu',
+ label: 'West Lake',
+ }],
+ }],
+}, {
+ value: 'jiangsu',
+ label: 'Jiangsu',
+ children: [{
+ value: 'nanjing',
+ label: 'Nanjing',
+ children: [{
+ value: 'zhonghuamen',
+ label: 'Zhong Hua Men',
+ }],
+ }],
+}];
class CompactDemo extends React.Component {
state = {
@@ -108,6 +131,14 @@ class CompactDemo extends React.Component {
placeholder="Email"
/>
+
+
+
+
+
);
}
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index 99b76de878..18be3d6cb8 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -259,10 +259,13 @@
z-index: auto;
}
- // reset border for Select, datePicker
+ // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
+ & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
+ & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
+ & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
+ & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
border-radius: 0;
border-right-width: 0;
}
@@ -270,7 +273,10 @@
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input {
+ & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
+ & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
+ & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
+ & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
@@ -278,7 +284,10 @@
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input {
+ & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
+ & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
+ & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
+ & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-right-width: 1px;