diff --git a/packages/ui-core/src/styles/colors.stories.tsx b/packages/ui-core/src/styles/colors.stories.tsx
index 8393cf8..5ddc437 100644
--- a/packages/ui-core/src/styles/colors.stories.tsx
+++ b/packages/ui-core/src/styles/colors.stories.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { base } from '../../postcss.variables.js';
+import { Icon } from '@trutoo/ui-icons';
export default {
title: 'Colors',
@@ -12,14 +13,8 @@ export const basic = () => (
.map(key => (
diff --git a/packages/ui-datepicker/src/Datepicker.tsx b/packages/ui-datepicker/src/Datepicker.tsx
index dd22eb7..e1b0daf 100644
--- a/packages/ui-datepicker/src/Datepicker.tsx
+++ b/packages/ui-datepicker/src/Datepicker.tsx
@@ -1,4 +1,5 @@
import React, { Component, MouseEvent, KeyboardEvent, createRef } from 'react';
+import { Icon } from '@trutoo/ui-icons';
import { Validator, ValidationExpression, Grid } from '@trutoo/ui-core';
import scrollIntoView from 'scroll-into-view-if-needed';
@@ -344,6 +345,26 @@ export default class Datepicker extends Component {
// RENDER
//------------------------------------------------------------------------------------
+ renderHelper() {
+ if (this.props.disabled) {
+ return ;
+ }
+
+ if (this.props.value !== null && this.props.value !== undefined && this.props.value.date) {
+ return (
+
+ );
+ }
+
+ return ;
+ }
+
render() {
// Reset date refs on render
this.dateRefs = {};
@@ -387,15 +408,7 @@ export default class Datepicker extends Component {
{...this.props.inputProps}
/>
- {this.props.disabled || !this.state.focused ? (
-
- ) : (
-
- )}
+ {this.renderHelper()}
{this.state.dates && (
diff --git a/packages/ui-typeahead/src/Typeahead.tsx b/packages/ui-typeahead/src/Typeahead.tsx
index c30c3ca..3cd167c 100644
--- a/packages/ui-typeahead/src/Typeahead.tsx
+++ b/packages/ui-typeahead/src/Typeahead.tsx
@@ -324,11 +324,16 @@ export default class Typeahead exte
);
}
- if (this.props.disabled || !this.state.focused) {
+ if (this.props.disabled) {
return ;
}
- if (!this.props.readonly && this.hasValueOrFocus()) {
+ if (
+ !this.props.readonly &&
+ this.props.value !== null &&
+ this.props.value !== undefined &&
+ this.props.value.view !== ''
+ ) {
return (
exte
/>
);
}
+
+ return ;
}
render() {