diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index 0c43f95e1..8b37af070 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -1,4 +1,8 @@ .#{$ns}Combo { + &-placeholder { + color: $text--muted-color; + } + &-toolbarBtn { line-height: $Combo-toolbarBtn-lineHeight; height: $Combo-toolbarBtn-height; @@ -105,6 +109,12 @@ > .#{$ns}Combo-items { margin: (-$Combo--vertical-item-gap * 2) (-$Combo--vertical-item-gap * 2) 0 (-$Combo--vertical-item-gap * 2); + + > .#{$ns}Combo-placeholder { + padding: ($Combo--vertical-item-gap * 2) ($Combo--vertical-item-gap * 2) + 0 ($Combo--vertical-item-gap * 2); + margin-bottom: $Combo--vertical-item-gap * 2; + } } .#{$ns}Combo-itemTag { diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index a45bc7ab3..5ccbbedfc 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -94,7 +94,8 @@ export default class ComboControl extends React.Component { dragIcon: 'glyphicon glyphicon-sort', deleteIcon: 'glyphicon glyphicon-remove', tabsMode: false, - tabsStyle: '' + tabsStyle: '', + placeholder: '<çİş>' }; static propsList: Array = [ 'minLength', @@ -865,7 +866,8 @@ export default class ComboControl extends React.Component { noBorder, conditions, lazyLoad, - changeImmediately + changeImmediately, + placeholder } = this.props; let controls = this.props.controls; @@ -890,7 +892,7 @@ export default class ComboControl extends React.Component { )} >
- {Array.isArray(value) + {Array.isArray(value) && value.length ? value.map((value, index, thelist) => { const toolbar: Array = []; @@ -1011,7 +1013,9 @@ export default class ComboControl extends React.Component {
); }) - : null} + : placeholder ? ( +
{placeholder}
+ ) : null} {!disabled ? (