Add palceholder for custom field value.

Author: Integral

src/article/manuscript/ManuscriptPackage.js

@@ -359,6 +359,7 @@ export default {
     config.addLabel('add-action', 'Add')
     config.addLabel('enter-url-placeholder', 'Enter url')
     config.addLabel('enter-keyword', 'Enter keyword')
+    config.addLabel('enter-keywords', 'Click to add keywords')
 
     // Icons
     config.addIcon('create-unordered-list', { 'fontawesome': 'fa-list-ul' })

src/article/metadata/MetadataPackage.js

@@ -380,6 +380,8 @@ export default {
     config.addLabel('empty-figure-metadata', 'No fields specified')
     config.addLabel('open-link', 'Open Link')
     config.addLabel('enter-keyword', 'Enter keyword')
+    config.addLabel('enter-keywords', 'Click to add keywords')
+
     // Icons
     config.addIcon('input-error', { 'fontawesome': 'fa-exclamation-circle' })
     config.addIcon('input-loading', { 'fontawesome': 'fa-spinner fa-spin' })

src/article/shared/CustomMetadataFieldComponent.js

@@ -17,7 +17,7 @@ export default class CustomMetadataFieldComponent extends NodeComponent {
         this._renderValue($$, 'name', { placeholder: this.getLabel('enter-custom-field-name') }).addClass('se-field-name'),
         $$(KeywordInput, {
           model: valuesModel,
-          placeholder: this.getLabel('enter-keyword'),
+          placeholder: this.getLabel('enter-keywords'),
           overlayId: valuesModel.id
         }).addClass('se-field-values')
       )

src/kit/ui/KeywordInput.js

@@ -17,12 +17,13 @@ export default class KeywordInput extends OverlayMixin(Component) {
     const values = model.getValue()
     const isEmpty = values.length === 0
     const isExpanded = this.state.isExpanded
+    const label = isEmpty ? this.props.placeholder : values.join(', ')
 
     const el = $$('div').addClass('sc-keyword-input')
     if (isEmpty) el.addClass('sm-empty')
     el.addClass(isExpanded ? 'sm-expanded' : 'sm-collapsed')
     el.append(
-      $$('div').addClass('se-label').text(values.join(', '))
+      $$('div').addClass('se-label').text(label)
         .on('click', this._onClick)
     )
     if (isExpanded) {
@@ -38,8 +39,9 @@ export default class KeywordInput extends OverlayMixin(Component) {
   }
 
   _renderEditor ($$) {
-    const { model, placeholder } = this.props
+    const model = this.props.model
     const values = model.getValue()
+    const placeholder = this.getLabel('enter-keyword')
 
     const Button = this.getComponent('button')
     const Input = this.getComponent('input')