diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index a8fc938b5..2ceffa62f 100755
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -363,6 +363,7 @@ class MarkdownNoteDetail extends React.Component {
ref='tags'
value={this.state.note.tags}
onChange={this.handleUpdateTag.bind(this)}
+ data={data}
/>
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index d14c7a8c0..900315096 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -108,7 +108,7 @@ class TagSelect extends React.Component {
}
render () {
- const { value, className } = this.props
+ const { value, data, className } = this.props
const tagList = _.isArray(value)
? value.map((tag) => {
@@ -127,6 +127,14 @@ class TagSelect extends React.Component {
})
: []
+ const completionList = _.sortBy(data.tagNoteMap.map(
+ (tag, name) => ({ name, size: tag.size })
+ ), ['name']).filter(
+ tag => tag.size > 0
+ ).map(
+ tag =>
+ )
+
return (
this.handleNewTagInputChange(e)}
onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
onBlur={(e) => this.handleNewTagBlur(e)}
+ list='completionList'
+ autoComplete='off'
/>
+
)
}
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 0ff4c6a34..002ee8653 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -49,6 +49,11 @@
outline none
padding 0 4px
font-size 13px
+ &::-webkit-calendar-picker-indicator
+ color $ui-inactive-text-color
+ cursor pointer
+ &:hover
+ background none
body[data-theme="dark"]
.tag