Fix Drag and Drop Bugs

- Fix hostnames getting lost on drag and drop (new node, no save)
- Disable bubbling of drag and drop from input fields

src/manifest.json

 {
         "manifest_version": 2,
         "name": "Gorilla Script- and Style-Loader",
-        "version": "3.0.0",
+        "version": "3.0.1",
         "description": "Enables you to load Javascript and CSS into websites.",
         "default_locale": "en",
         "icons": {

src/options.js

@@ -163,9 +163,22 @@
                 }
         };
 
+        const stopDrag = (node) => {
+                node.setAttribute("draggable", "true");
+                node.addEventListener(
+                        "dragstart",
+                        (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                        },
+                        { passive: false }
+                );
+        };
+
         const addEventsToListItem = (node) => {
                 const input = node.querySelector(".input-file-url");
                 const select = node.querySelector("select");
+                const hostnames = node.querySelector(".input-file-hostnames");
                 const checkboxEnabled = node.querySelector(".checkbox-file-enabled");
                 const btnAdd = node.querySelector(".btn-file-add");
                 const btnRemove = node.querySelector(".btn-file-remove");
@@ -222,6 +235,14 @@
                         { passive: true }
                 );
 
+                hostnames.addEventListener(
+                        "keyup",
+                        function() {
+                                this.setAttribute("value", this.value);
+                        },
+                        { passive: true }
+                );
+
                 checkboxEnabled.addEventListener(
                         "change",
                         setVisualsBasedOnCheckboxEnabled,
@@ -249,6 +270,14 @@
                         { passive: true }
                 );
 
+                // drag and drop
+                // -------------
+
+                // disable bubbling for these elements
+                stopDrag(input);
+                stopDrag(hostnames);
+
+                // enable drag and drop for the list element
                 node.addEventListener("dragstart", onDragStartCallback, {
                         passive: true
                 });

src/options.scss

@@ -49,6 +49,7 @@ h1 span {
 li.file {
         position: relative;
         margin-bottom: 10px;
+        transition: opacity ease 0.3s;
         &.disabled {
                 opacity: 0.3;
         }