mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 03:22:59 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

Selected value in Cascader should be gray when focus search input

Browse Source
This commit is contained in:
afc163 2018-07-03 15:46:12 +08:00
parent 4aabc53744
commit cde8bc8361
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/cascader/index.tsx
View File

@ -341,7 +341,7 @@ export default class Cascader extends React.Component<CascaderProps, CascaderSta
prefixCls, inputPrefixCls, children, placeholder, size, disabled, prefixCls, inputPrefixCls, children, placeholder, size, disabled,
className, style, allowClear, showSearch = false, ...otherProps className, style, allowClear, showSearch = false, ...otherProps
} = props; } = props;
const value = state.value; const { value, inputFocused } = state;
const sizeCls = classNames({ const sizeCls = classNames({
[`${inputPrefixCls}-lg`]: size === 'large', [`${inputPrefixCls}-lg`]: size === 'large',
@ -364,6 +364,7 @@ export default class Cascader extends React.Component<CascaderProps, CascaderSta
[`${prefixCls}-picker-disabled`]: disabled, [`${prefixCls}-picker-disabled`]: disabled,
[`${prefixCls}-picker-${size}`]: !!size, [`${prefixCls}-picker-${size}`]: !!size,
[`${prefixCls}-picker-show-search`]: !!showSearch, [`${prefixCls}-picker-show-search`]: !!showSearch,
[`${prefixCls}-picker-focused`]: inputFocused,
}); });
// Fix bug of https://github.com/facebook/react/pull/5004 // Fix bug of https://github.com/facebook/react/pull/5004

5
components/cascader/style/index.less
View File

@ -28,6 +28,7 @@
background-color: @component-background; background-color: @component-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
outline: 0; outline: 0;
transition: color .3s;
&-with-value &-label { &-with-value &-label {
color: transparent; color: transparent;
@ -46,6 +47,10 @@
.active; .active;
} }
&-show-search&-focused {
color: @disabled-color;
}
&-label { &-label {
position: absolute; position: absolute;
left: 0; left: 0;