Fix cascader (#3243)

* docs: update demo

* fix: should show input value

components/cascader/demo/custom-render.md

@@ -64,7 +64,7 @@ ReactDOM.render(
     options={options}
     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
     displayRender={displayRender}
-    style={{ width: 200 }}
+    style={{ width: 270 }}
   />
 , mountNode);
 ````

components/cascader/demo/search.md

@@ -49,7 +49,6 @@ ReactDOM.render(
     options={options}
     onChange={onChange}
     placeholder="Please select"
-    style={{ width: 230 }}
     showSearch
   />,
   mountNode

components/cascader/index.en-US.md

@@ -48,3 +48,8 @@ Fields in `showSearch`:
 | sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
 | matchInputWidth | Whether the width of result list equals to input's | boolean | |
 
+<style>
+.ant-cascader-picker {
+  width: 220px;
+}
+</style>

components/cascader/index.tsx

@@ -144,6 +144,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     this.setState({
       popupVisible,
       inputFocused: popupVisible,
+      inputValue: popupVisible ? this.state.inputValue : '',
      });
     this.props.onPopupVisibleChange(popupVisible);
   }
@@ -256,6 +257,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     const pickerCls = classNames({
       [className]: !!className,
       [`${prefixCls}-picker`]: true,
+      [`${prefixCls}-picker-with-value`]: state.inputValue,
       [`${prefixCls}-picker-disabled`]: disabled,
     });
 

components/cascader/index.zh-CN.md

@@ -48,3 +48,9 @@ subtitle: 级联选择
 | render | 用于渲染 filter 后的选项 | `function(inputValue, path): React.ReactNode` | |
 | sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
 | matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
+
+<style>
+.ant-cascader-picker {
+  width: 220px;
+}
+</style>

components/cascader/style/index.less

@@ -11,8 +11,6 @@
     cursor: pointer;
     width: 100%;
     z-index: 1;
-    background: transparent;
-    color: transparent;
   }
   &-picker {
     position: relative;
@@ -23,6 +21,10 @@
     background-color: #fff;
     border-radius: @border-radius-base;
 
+    &-with-value &-label {
+      color: transparent;
+    }
+
     &-disabled {
       cursor: not-allowed;