diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx index fc1930029..e03360417 100644 --- a/webapp/src/components/propertyValueElement.tsx +++ b/webapp/src/components/propertyValueElement.tsx @@ -71,6 +71,7 @@ export default class PropertyValueElement extends React.Component } return ( p.id === propertyValue)} onChange={(value) => { diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss index 9e5d5bc0c..2d8b099ab 100644 --- a/webapp/src/widgets/valueSelector.scss +++ b/webapp/src/widgets/valueSelector.scss @@ -6,6 +6,13 @@ background-color: rgba(var(--main-fg), 0.1), } + > .octo-label { + margin: 0 10px; + &.empty { + color: rgba(var(--main-fg), 0.6); + } + } + .value-menu-option { display: flex; width: 100%; diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx index f738c64a6..9f89b5be1 100644 --- a/webapp/src/widgets/valueSelector.tsx +++ b/webapp/src/widgets/valueSelector.tsx @@ -19,6 +19,7 @@ import './valueSelector.scss' type Props = { options: IPropertyOption[] value: IPropertyOption; + emptyValue: string; onCreate?: (value: string) => void onChange?: (value: string) => void onChangeColor?: (option: IPropertyOption, color: string) => void @@ -26,7 +27,18 @@ type Props = { intl: IntlShape } -class ValueSelector extends React.Component { +type State = { + activated: boolean +} + +class ValueSelector extends React.Component { + public constructor(props: Props) { + super(props) + this.state = { + activated: false, + } + } + public shouldComponentUpdate(): boolean { return true } @@ -65,6 +77,18 @@ class ValueSelector extends React.Component { } public render(): JSX.Element { + if (!this.state.activated) { + return ( +
this.setState({activated: true})} + > + + {this.props.value ? this.props.value.value : this.props.emptyValue} + +
+ ) + } return ( { autoFocus={true} value={this.props.value} closeMenuOnSelect={true} + placeholder={this.props.emptyValue} + defaultMenuIsOpen={true} /> ) }