diff --git a/app/assets/javascripts/hyrax/autocomplete/linked_data.es6 b/app/assets/javascripts/hyrax/autocomplete/linked_data.es6 index 2a8becad7c..466129652e 100644 --- a/app/assets/javascripts/hyrax/autocomplete/linked_data.es6 +++ b/app/assets/javascripts/hyrax/autocomplete/linked_data.es6 @@ -18,6 +18,9 @@ export default class LinkedData { let result = this.element.select2("data") this.element.select2("destroy") this.element.val(result.label).attr("readonly", "readonly") + // Adding d-block class to the remove button to show it after a selection is made. + let removeButton = this.element.closest('.field-wrapper').find('.input-group-btn.field-controls .remove') + removeButton.addClass('d-block') this.setIdentifier(result.id) } diff --git a/app/assets/javascripts/hyrax/editor/controlled_vocabulary.es6 b/app/assets/javascripts/hyrax/editor/controlled_vocabulary.es6 index 0cd3d30586..01e4ff8f05 100644 --- a/app/assets/javascripts/hyrax/editor/controlled_vocabulary.es6 +++ b/app/assets/javascripts/hyrax/editor/controlled_vocabulary.es6 @@ -31,6 +31,8 @@ export default class ControlledVocabulary extends FieldManager { this.paramKey = paramKey this.fieldName = this.element.data('fieldName') this.searchUrl = this.element.data('autocompleteUrl') + // Used to prevent index collisions for existing words when removing and adding back in values. + this.postRemovalAdjustment = 0 } // Overrides FieldManager, because field manager uses the wrong selector @@ -49,6 +51,15 @@ export default class ControlledVocabulary extends FieldManager { // this._manageFocus() // } + // Overrides FieldManager in order to display Remove button for values that exist at initial load time + _createRemoveControl() { + if (this.element.find('input.multi-text-field').val()) { + this.remover.addClass('d-block') + this.remover.addClass('has-existing-value') + } + $(this.fieldWrapperClass + ' .field-controls', this.element).append(this.remover) + } + // Overrides FieldManager in order to avoid doing a clone of the existing field createNewField($activeField) { let $newField = this._newFieldTemplate() @@ -68,20 +79,24 @@ export default class ControlledVocabulary extends FieldManager { } _newFieldTemplate() { - let index = this._maxIndex() + let index = this._maxIndex() + this.postRemovalAdjustment let rowTemplate = this._template() let controls = this.controls.clone()//.append(this.remover) let row = $(rowTemplate({ "paramKey": this.paramKey, "name": this.fieldName, "index": index, - "class": "controlled_vocabulary" })) + "class": "controlled_vocabulary", + "placeholder": "Search for a location..." })) .append(controls) + let removeButton = row.find('.remove'); + removeButton.removeClass('d-block') + removeButton.removeClass('has-existing-value') return row } get _source() { return "