feat(dropdown): allow editing of added items

src/definitions/modules/dropdown.js

@@ -2697,6 +2697,52 @@
                             .addClass(className.label)
                             .attr('data-' + metadata.value, value)
                             .html(templates.label(value, text, settings));
+                        if (settings.allowAdditions) {
+                            $label.on ("click", function(e) {
+                                if (e.target !== this || $(this).hasClass('editing')) {
+                                    return;
+                                }
+                                $(this).addClass('editing');
+                                $(this).html($(this).children())
+                                $(this).children().hide();
+                                let inputDiv = $('<input type="text" value="' + $(this).attr('data-value') + '"></div>')
+                                inputDiv.on('keydown', function(e) {
+                                    // Prevent parent from acting on Backspace/Delete while typing
+                                    if (e.key === 'Backspace' || e.key === 'Delete') {
+                                        e.stopPropagation();
+                                    }
+                                    if (e.key === 'Enter') {
+                                        e.stopPropagation();
+                                        $(this).trigger('blur');
+                                    }
+                                });
+                                inputDiv.on('blur', function() {
+                                    let input = $(this);
+                                    let container = input.parent()
+
+                                    let oldVal = container.attr('data-value');
+                                    let newVal = input.val();
+                                    if (!(input.val()).trim()) {
+                                        module.remove.activeLabels(container);
+                                        return
+                                    }
+                                    let userVal = module.is.userValue()
+                                    if (oldVal !== newVal && !userVal) {
+                                        let $activeItem = $menu.children('.' + className.active).eq(0)
+                                        module.remove.activeLabels(container);
+                                        module.add.label(newVal, newVal, true);
+                                        module.add.value(newVal, newVal, $activeItem, false);
+                                    } else {
+                                        container.prepend(input.val())
+                                        container.removeClass('editing');
+                                        input.remove()
+                                        container.children('.close.icon, .delete.icon').show();
+                                    }
+                                })
+                                $(this).prepend(inputDiv)
+                                inputDiv.trigger("focus")
+                            })
+                        }
                         $label = settings.onLabelCreate.call($label, value, text);
 
                         if (module.has.label(value)) {

src/definitions/modules/dropdown.less

@@ -989,6 +989,17 @@ select.ui.dropdown {
         .ui.multiple.search.dropdown@{notSelection} > input.search:first-child {
             min-width: @multipleSearchMinWidth;
         }
+
+        /* Edited label close/delete icon positioning */
+        .ui.multiple.search.dropdown > .ui.label.editing > .close.icon,
+        .ui.multiple.search.dropdown > .ui.label.editing > .delete.icon {
+            margin: .3em 0 0 .5em;
+        }
+
+        .ui.multiple.search.dropdown > .ui.label > input[type=text] {
+            padding: 1px;
+            vertical-align: baseline;
+        }
     }
 }