From c36417189981580ce092a6bd039dfabcfffa28dc Mon Sep 17 00:00:00 2001
From: PsyStorm25 <verbatim128@yahoo.com>
Date: Fri, 19 Aug 2016 18:27:59 +0200
Subject: [PATCH 1/5] Angularjs compatible

This version is compatible with angularjs select list generated with ng-options.
The code added could maybe be write in a nicer way, feel free to do so.
---
 angularjs-compatible | 415 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 415 insertions(+)
 create mode 100644 angularjs-compatible

diff --git a/angularjs-compatible b/angularjs-compatible
new file mode 100644
index 0000000..6e15a47
--- /dev/null
+++ b/angularjs-compatible
@@ -0,0 +1,415 @@
+/* globals jQuery, window, document */
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function($) {
+
+  var methods = {
+    options : {
+      "optionClass": "",
+      "dropdownClass": "",
+      "autoinit": false,
+      "callback": false,
+      "onSelected": false,
+      "destroy": function(element) {
+        this.destroy(element);
+      },
+      "dynamicOptLabel": "Add a new option..."
+    },
+    init: function(options) {
+
+      // Apply user options if user has defined some
+      if (options) {
+        options = $.extend(methods.options, options);
+      } else {
+        options = methods.options;
+      }
+
+      function initElement($select) {
+        // Don't do anything if this is not a select or if this select was already initialized
+        if ($select.data("dropdownjs") || !$select.is("select")) {
+          return;
+        }
+
+        // Is it a multi select?
+        var multi = $select.attr("multiple");
+
+        // Does it allow to create new options dynamically?
+        var dynamicOptions = $select.attr("data-dynamic-opts"),
+            $dynamicInput = $();
+
+        // Create the dropdown wrapper
+        var $dropdown = $("<div></div>");
+        $dropdown.addClass("dropdownjs").addClass(options.dropdownClass);
+        $dropdown.data("select", $select);
+
+        // Create the fake input used as "select" element and cache it as $input
+        var $input = $("<input type=text readonly class=fakeinput>");
+        if ($.material) { $input.data("mdproc", true); }
+        // Append it to the dropdown wrapper
+        $dropdown.append($input);
+
+        // Create the UL that will be used as dropdown and cache it AS $ul
+        var $ul = $("<ul></ul>");
+        $ul.data("select", $select);
+
+        // Append it to the dropdown
+        $dropdown.append($ul);
+
+        // Transfer the placeholder attribute
+        $input.attr("placeholder", $select.attr("placeholder"));
+
+        // Loop trough options and transfer them to the dropdown menu
+        $select.find("option").each(function() {
+          // Cache $(this)
+          var $this = $(this);
+          methods._addOption($ul, $this);
+
+        });
+
+        // If this select allows dynamic options add the widget
+        if (dynamicOptions) {
+          $dynamicInput = $("<li class=dropdownjs-add></li>");
+          $dynamicInput.append("<input>");
+          $dynamicInput.find("input").attr("placeholder", options.dynamicOptLabel);
+          $ul.append($dynamicInput);
+        }
+
+
+
+        // Cache the dropdown options
+        var selectOptions = $dropdown.find("li");
+
+        // If is a single select, selected the first one or the last with selected attribute
+        if (!multi) {
+            var $selected;
+            if ($select.find(":selected").length) {
+                $selected = $select.find(":selected").last();
+            }
+            else {
+                $selected = $select.find("option, li").first();
+               // $selected = $select.find("option").first();
+            }
+            methods._select($dropdown, $selected);
+        } else {
+            var selectors = [], val = $select.val()
+            for (var i in val) {
+              selectors.push('li[value=' + val[i] + ']')
+            }
+            if (selectors.length > 0) {
+              methods._select($dropdown, $dropdown.find(selectors.join(',')));
+            }
+        }
+
+        // Transfer the classes of the select to the input dropdown
+        $input.addClass($select[0].className);
+
+        // Hide the old and ugly select
+        $select.hide().attr("data-dropdownjs", true);
+
+        // Bring to life our awesome dropdownjs
+        $select.after($dropdown);
+
+        // Call the callback
+        if (options.callback) {
+          options.callback($dropdown);
+        }
+
+        //---------------------------------------//
+        // DROPDOWN EVENTS                       //
+        //---------------------------------------//
+
+        // On click, set the clicked one as selected
+        $ul.on("click", "li:not(.dropdownjs-add)", function(e) {
+          methods._select($dropdown, $(this));
+          // trigger change event, if declared on the original selector
+          $select.change();
+        });
+        $ul.on("keydown", "li:not(.dropdownjs-add)", function(e) {
+          if (e.which === 27) {
+            $(".dropdownjs > ul > li").attr("tabindex", -1);
+            return $input.removeClass("focus").blur();
+          }
+          if (e.which === 32 && !$(e.target).is("input")) {
+            methods._select($dropdown, $(this));
+            return false;
+          }
+        });
+
+        $ul.on("focus", "li:not(.dropdownjs-add)", function() {
+          if ($select.is(":disabled")) {
+            return;
+          }
+          $input.addClass("focus");
+        });
+
+        // Add new options when the widget is used
+        if (dynamicOptions && dynamicOptions.length) {
+          $dynamicInput.on("keydown", function(e) {
+            if(e.which !== 13) return;
+            var $option = $("<option>"),
+                val = $dynamicInput.find("input").val();
+            $dynamicInput.find("input").val("");
+
+            $option.attr("value", val);
+            $option.text(val);
+            $select.append($option);
+
+          });
+        }
+
+        // Listen for new added options and update dropdown if needed
+        $select.on("DOMNodeInserted", function(e) {
+          var $this = $(e.target);
+          if (!$this.val().length) return;
+
+            //Need to do the imeout for angularjs otherwise the "value" attribute is not always bound at this time (could create a problem when rebinding an already bound list)
+            setTimeout(function() {
+                methods._addOption($ul, $this);
+                $ul.find("li").not(".dropdownjs-add").attr("tabindex", 0);
+            }, 0);
+
+        });
+
+        $select.on("DOMNodeRemoved", function(e) {
+          var deletedValue = e.target.getAttribute('value');
+          $ul.find("li[value='"+deletedValue+"']").remove();
+          var $selected;
+
+          setTimeout(function () {
+            if ($select.find(":selected").length) {
+              $selected = $select.find(":selected").last();
+            }
+            else {
+              $selected = $select.find("option, li").first();
+            }
+            methods._select($dropdown, $selected);
+          }, 100);
+
+        });
+
+        // Update dropdown when using val, need to use .val("value").trigger("change");
+        $select.on("change", function(e) {
+          var $this = $(e.target);
+
+          if (!multi) {
+            var $selected;
+            if ($select.find(":selected").length) {
+              $selected = $select.find(":selected").last();
+            }
+            else {
+              $selected = $select.find("option, li").first();
+            }
+            methods._select($dropdown, $selected);
+          } else {
+            methods._select($dropdown, $select.find(":selected"));
+          }
+        });
+
+        // Used to make the dropdown menu more dropdown-ish
+        $input.on("click focus", function(e) {
+          e.stopPropagation();
+          if ($select.is(":disabled")) {
+            return;
+          }
+          $(".dropdownjs > ul > li").attr("tabindex", -1);
+          $(".dropdownjs > input").not($(this)).removeClass("focus").blur();
+
+          $(".dropdownjs > ul > li").not(".dropdownjs-add").attr("tabindex", 0);
+
+          // Set height of the dropdown
+          var coords = {
+            top: $(this).offset().top - $(document).scrollTop(),
+            left: $(this).offset().left - $(document).scrollLeft(),
+            bottom: $(window).height() - ($(this).offset().top - $(document).scrollTop()),
+            right: $(window).width() - ($(this).offset().left - $(document).scrollLeft())
+          };
+
+          var height = coords.bottom;
+
+          // Decide if place the dropdown below or above the input
+          if (height < 200 && coords.top > coords.bottom) {
+            height = coords.top;
+            $ul.attr("placement", "top-left");
+          } else {
+            $ul.attr("placement", "bottom-left");
+          }
+
+          $(this).next("ul").css("max-height", height - 20);
+          $(this).addClass("focus");
+        });
+        // Close every dropdown on click outside
+        $(document).on("click", function(e) {
+
+          // Don't close the multi dropdown if user is clicking inside it
+          if (multi && $(e.target).parents(".dropdownjs").length) return;
+
+          // Don't close the dropdown if user is clicking inside the dynamic-opts widget
+          if ($(e.target).parents(".dropdownjs-add").length || $(e.target).is(".dropdownjs-add")) return;
+
+          // Close opened dropdowns
+          $(".dropdownjs > ul > li").attr("tabindex", -1);
+          $input.removeClass("focus");
+        });
+      }
+
+      if (options.autoinit) {
+        $(document).on("DOMNodeInserted", function(e) {
+          var $this = $(e.target);
+          if (!$this.is("select")) {
+            $this = $this.find('select');
+          }
+          if ($this.is(options.autoinit)) {
+            $this.each(function() {
+              initElement($(this));
+            });
+          }
+        });
+      }
+
+      // Loop trough elements
+      $(this).each(function() {
+        initElement($(this));
+      });
+    },
+    select: function(target) {
+      var $target = $(this).find("[value=\"" + target + "\"]");
+      methods._select($(this), $target);
+    },
+    _select: function($dropdown, $target) {
+      if ($target.is(".dropdownjs-add")) return;
+
+      // Get dropdown's elements
+      var $select = $dropdown.data("select"),
+          $input  = $dropdown.find("input.fakeinput");
+      // Is it a multi select?
+      var multi = $select.attr("multiple");
+
+      // Cache the dropdown options
+      var selectOptions = $dropdown.find("li");
+
+      // Behavior for multiple select
+      if (multi) {
+        // Toggle option state
+        $target.toggleClass("selected");
+        // Toggle selection of the clicked option in native select
+        $target.each(function(){
+          var $selected = $select.find("[value=\"" + $(this).attr("value") + "\"]");
+          $selected.prop("selected", $(this).hasClass("selected"));
+        });
+        // Add or remove the value from the input
+        var text = [];
+        selectOptions.each(function() {
+          if ($(this).hasClass("selected")) {
+            text.push($(this).text());
+          }
+        });
+        $input.val(text.join(", "));
+      }
+
+      // Behavior for single select
+      if (!multi) {
+        // Unselect options except the one that will be selected
+        if ($target.is("li")) {
+            selectOptions.not($target).removeClass("selected");
+        }
+        // Select the selected option
+        $target.addClass("selected");
+        // Set the value to the native select
+        $select.val($target.attr("value"));
+        // Set the value to the input
+        $input.val($target.text().trim());
+      }
+
+      // This is used only if Material Design for Bootstrap is selected
+      if ($.material) {
+        if ($input.val().trim()) {
+          $select.removeClass("empty");
+        } else {
+          $select.addClass("empty");
+        }
+      }
+
+       // Call the callback
+        if (this.options.onSelected) {
+            this.options.onSelected($target.attr("value"));
+        }
+
+    },
+    _addOption: function($ul, $this) {
+      // Create the option
+      var $option = $("<li></li>");
+
+      // Style the option
+      $option.addClass(this.options.optionClass);
+
+      // If the option has some text then transfer it
+      if ($this.text()) {
+        $option.text($this.text());
+      }
+      // Otherwise set the empty label and set it as an empty option
+      else {
+        $option.html("&nbsp;");
+      }
+      // Set the value of the option
+      $option.attr("value", $this.val());
+
+      // Will user be able to remove this option?
+      if ($ul.data("select").attr("data-dynamic-opts")) {
+        $option.append("<span class=close></span>");
+        $option.find(".close").on("click", function() {
+          $option.remove();
+          $this.remove();
+        });
+      }
+
+      // Ss it selected?
+      if ($this.prop("selected")) {
+        $option.attr("selected", true);
+        $option.addClass("selected");
+      }
+
+      // Append option to our dropdown
+      if ($ul.find(".dropdownjs-add").length) {
+        $ul.find(".dropdownjs-add").before($option);
+      } else {
+          if ($this.val() === "?") //Case used by angularjs to set an "empty" option when the ng-model is not definied or does not match any of the options available
+              $ul.prepend($option);
+          else {
+              $ul.append($option);
+          }
+
+          //Reorder li from "value" attribute as angularjs create them sequentially (object:100, object:101, object:102, object:103, object:104 etc.)
+          var li = $ul.children("li");
+          li.detach().sort(function (a, b) {
+              return $(a).attr("value").localeCompare($(b).attr("value"));
+          });
+          $ul.append(li);
+      }
+    },
+    destroy: function($e) {
+      $($e).show().removeAttr('data-dropdownjs').next('.dropdownjs').remove();
+    }
+  };
+
+  $.fn.dropdown = function(params) {
+    if( typeof methods[params] == 'function' ) methods[params](this);
+    if (methods[params]) {
+      return methods[params].apply(this, Array.prototype.slice.call(arguments,1));
+    } else if (typeof params === "object" | !params) {
+      return methods.init.apply(this, arguments);
+    } else {
+      $.error("Method " + params + " does not exists on jQuery.dropdown");
+    }
+  };
+
+}));

From cae7c526fcba23e9dab745506504435d4aaea987 Mon Sep 17 00:00:00 2001
From: PsyStorm25 <verbatim128@yahoo.com>
Date: Sun, 28 Aug 2016 16:36:41 +0200
Subject: [PATCH 2/5] Fixed minor issues

Added code to fix an issue on the selected item style when setting the selected value back to 'undefined'.
Changed the code ordering the item. Now it exactly match the 'option' order from native select control.
---
 angularjs-compatible | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/angularjs-compatible b/angularjs-compatible
index 6e15a47..eb58cea 100644
--- a/angularjs-compatible
+++ b/angularjs-compatible
@@ -388,12 +388,19 @@
               $ul.append($option);
           }
 
-          //Reorder li from "value" attribute as angularjs create them sequentially (object:100, object:101, object:102, object:103, object:104 etc.)
-          var li = $ul.children("li");
-          li.detach().sort(function (a, b) {
-              return $(a).attr("value").localeCompare($(b).attr("value"));
+          //select the newly selected option and unselect previous one (if any)
+          if ($option.hasClass("selected")) {
+              methods._select($ul.parent(), $option);
+          }
+
+          //Re-order "li" in the same order than "options" in native "select".
+          var orderedLi = new Array();
+          $.each($this.closest("select").find("option"), function(i, opt) {
+              var li = $ul.find("li[value='" + $(opt).attr("value") + "']");
+              if (li.length > 0)
+                  orderedLi.push(li[0]);
           });
-          $ul.append(li);
+          $ul.empty().append(orderedLi);
       }
     },
     destroy: function($e) {

From 5344d6312f41683eef70d187bddd0c51b29fd9f9 Mon Sep 17 00:00:00 2001
From: PsyStorm25 <verbatim128@yahoo.com>
Date: Wed, 31 Aug 2016 01:41:27 +0200
Subject: [PATCH 3/5] Empty option fix

Fixing a bug with "empty" option.
---
 angularjs-compatible | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/angularjs-compatible b/angularjs-compatible
index eb58cea..29ebd8e 100644
--- a/angularjs-compatible
+++ b/angularjs-compatible
@@ -170,7 +170,8 @@
         // Listen for new added options and update dropdown if needed
         $select.on("DOMNodeInserted", function(e) {
           var $this = $(e.target);
-          if (!$this.val().length) return;
+          //if (!$this.val().length) return;
+          if (!e.target.tagName === "OPTION") return; //This condition instead of the previous one prevent $ul to miss the empty "li "corresponding to the empty "option".
 
             //Need to do the imeout for angularjs otherwise the "value" attribute is not always bound at this time (could create a problem when rebinding an already bound list)
             setTimeout(function() {

From 71e075eb3bf70d7a915eca91a5021f7316599af4 Mon Sep 17 00:00:00 2001
From: PsyStorm25 <verbatim128@yahoo.com>
Date: Mon, 5 Sep 2016 19:48:29 +0200
Subject: [PATCH 4/5] OptGroup, MutationObserver

Big update on the files.
It is now compatible with optgroup element and can be combined with angularjs also.

I also changed the use of DOMNodeInserted and DOMNodeRemoved with the more recent MutationObserver because there was a problem I noticed only with Firefox when the select input was loaded from angularjs SPA page (single page application).
---
 angularjs-compatible | 293 +++++++++++++++++++++++++++++--------------
 1 file changed, 200 insertions(+), 93 deletions(-)

diff --git a/angularjs-compatible b/angularjs-compatible
index 29ebd8e..883344e 100644
--- a/angularjs-compatible
+++ b/angularjs-compatible
@@ -68,13 +68,25 @@
         // Transfer the placeholder attribute
         $input.attr("placeholder", $select.attr("placeholder"));
 
-        // Loop trough options and transfer them to the dropdown menu
-        $select.find("option").each(function() {
-          // Cache $(this)
-          var $this = $(this);
-          methods._addOption($ul, $this);
+        // Loop trough options/optgroups and transfer them to the dropdown menu
+        var $items = $select.find("> optgroup, > option");
+        if ($items.length > 0) {
+            $items.each(function () {
+                var $this = $(this);
+                if ($this.is("optgroup")) {
+                    //add in the option group label
+                    methods._addOption($ul, $this);
+                    //loop through the list and add each option
+                    $this.find("option").each(function (index, item) {
+                        methods._addOption($ul, $(item));
+                    });
+                } else {
+                    //$this is "option"
+                    methods._addOption($ul, $this);
+                }
+            });
+        } 
 
-        });
 
         // If this select allows dynamic options add the widget
         if (dynamicOptions) {
@@ -134,6 +146,9 @@
           // trigger change event, if declared on the original selector
           $select.change();
         });
+        $ul.on("click", "span.optgroup", function (e) {
+            return false;
+        });
         $ul.on("keydown", "li:not(.dropdownjs-add)", function(e) {
           if (e.which === 27) {
             $(".dropdownjs > ul > li").attr("tabindex", -1);
@@ -167,36 +182,77 @@
           });
         }
 
-        // Listen for new added options and update dropdown if needed
-        $select.on("DOMNodeInserted", function(e) {
-          var $this = $(e.target);
-          //if (!$this.val().length) return;
-          if (!e.target.tagName === "OPTION") return; //This condition instead of the previous one prevent $ul to miss the empty "li "corresponding to the empty "option".
-
-            //Need to do the imeout for angularjs otherwise the "value" attribute is not always bound at this time (could create a problem when rebinding an already bound list)
-            setTimeout(function() {
-                methods._addOption($ul, $this);
-                $ul.find("li").not(".dropdownjs-add").attr("tabindex", 0);
-            }, 0);
 
+        var observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+
+                if (mutation.type === "childList") {
+                    //Node added:  Listen for new added options/optgroup and update dropdown if needed
+                    if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+                        $(mutation.addedNodes).each(function (i, node) {
+                            //Need to do the timeout for angularjs otherwise the "value" attribute is not always bound at this time (could create a problem when rebinding an already bound list)
+                            setTimeout(function () {
+                                var $elem = $(node);
+                                if ($elem.is("optgroup")) {
+                                    //add in the option group label
+                                    methods._addOption($ul, $elem);
+                                    //loop through the list and add each option
+                                    $elem.find("option").each(function (index, item) {
+                                        methods._addOption($ul, $(item));
+                                    });
+                                } else {
+                                    methods._addOption($ul, $elem);
+                                    $ul.find("li").not(".dropdownjs-add").attr("tabindex", 0);
+                                }
+                            }, 0);
+                        });
+                    }
+
+                    //Node removed
+                    if (mutation.removedNodes && mutation.removedNodes.length > 0) {
+                        $(mutation.removedNodes).each(function (i, node) {
+                            var $elem = $(node);
+                            if ($elem.is("optgroup")) {
+                                $ul.find("span[label='" + $elem.attr("label") + "']").remove();
+                                $elem.find("option").each(function (index, item) {
+                                    $ul.find("li[value='" + $(item).attr("value") + "']").remove();
+                                });
+                            } else {
+                                var deletedValue = $elem.attr('value');
+                                $ul.find("li[value='" + deletedValue + "']").remove();
+                            }
+                            var $selected;
+
+                            setTimeout(function () {
+                                if ($select.find(":selected").length) {
+                                    $selected = $select.find(":selected").last();
+                                } else {
+                                    $selected = $select.find("option, li").first();
+                                }
+                                methods._select($dropdown, $selected);
+                            }, 100);
+                        });
+                    }
+
+
+                }
+            });
         });
 
-        $select.on("DOMNodeRemoved", function(e) {
-          var deletedValue = e.target.getAttribute('value');
-          $ul.find("li[value='"+deletedValue+"']").remove();
-          var $selected;
+        // Notify me of everything!
+        var observerConfig = {
+            //attributes: true,
+            childList: true,
+            //characterData: true,
+            //subtree: true
+        };
+
+          // Node, config
+          // In this case we'll listen to all changes to $select and child nodes
+        if ($select && $select.length > 0)
+            observer.observe($select[0], observerConfig);
 
-          setTimeout(function () {
-            if ($select.find(":selected").length) {
-              $selected = $select.find(":selected").last();
-            }
-            else {
-              $selected = $select.find("option, li").first();
-            }
-            methods._select($dropdown, $selected);
-          }, 100);
 
-        });
 
         // Update dropdown when using val, need to use .val("value").trigger("change");
         $select.on("change", function(e) {
@@ -264,17 +320,41 @@
       }
 
       if (options.autoinit) {
-        $(document).on("DOMNodeInserted", function(e) {
-          var $this = $(e.target);
-          if (!$this.is("select")) {
-            $this = $this.find('select');
-          }
-          if ($this.is(options.autoinit)) {
-            $this.each(function() {
-              initElement($(this));
-            });
-          }
-        });
+
+          var observer = new MutationObserver(function (mutations) {
+              mutations.forEach(function (mutation) {
+
+                  if (mutation.type === "childList") {
+                      //Node added:  Listen for new changes on node in body
+                      if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+                          $(mutation.addedNodes).each(function (i, node) {
+                              var $this = $(node);
+                              if (!$this.is("select")) {
+                                  $this = $this.find('select');
+                              }
+                              if ($this.is(options.autoinit)) {
+                                  $this.each(function () {
+                                      initElement($(this));
+                                  });
+                              }
+                          });
+                      }
+
+                  }
+              });
+          });
+
+          // Notify me of everything!
+          var observerConfig = {
+              //attributes: true,
+              childList: true,
+              //characterData: true,
+              subtree: true
+          };
+
+          // In this case we'll listen to all changes on body and child nodes
+          observer.observe(document.body, observerConfig);
+
       }
 
       // Loop trough elements
@@ -327,6 +407,8 @@
         $target.addClass("selected");
         // Set the value to the native select
         $select.val($target.attr("value"));
+        //$select.find("option").prop('selected', false);
+        //$select.find("option[value='" + $target.attr("value") + "']").prop('selected', true);
         // Set the value to the input
         $input.val($target.text().trim());
       }
@@ -346,63 +428,88 @@
         }
 
     },
-    _addOption: function($ul, $this) {
-      // Create the option
-      var $option = $("<li></li>");
+    _addOption: function ($ul, $this) {
+        var $option = undefined;
+        if ($this.is("optgroup")) {
+            // Create the optgroup
+            $option = $("<span class='optgroup' label='" + $this.attr("label") + "'>" + $this.attr("label") + "</span>");
+        } else {
+            // Create the option
+            $option = $("<li></li>");
 
-      // Style the option
-      $option.addClass(this.options.optionClass);
+            // Style the option
+            $option.addClass(this.options.optionClass);
 
-      // If the option has some text then transfer it
-      if ($this.text()) {
-        $option.text($this.text());
-      }
-      // Otherwise set the empty label and set it as an empty option
-      else {
-        $option.html("&nbsp;");
-      }
-      // Set the value of the option
-      $option.attr("value", $this.val());
-
-      // Will user be able to remove this option?
-      if ($ul.data("select").attr("data-dynamic-opts")) {
-        $option.append("<span class=close></span>");
-        $option.find(".close").on("click", function() {
-          $option.remove();
-          $this.remove();
-        });
-      }
+            // If the option has some text then transfer it
+            if ($this.text()) {
+                $option.text($this.text());
+            }
+                // Otherwise set the empty label and set it as an empty option
+            else {
+                $option.html("&nbsp;");
+            }
+            // Set the value of the option
+            $option.attr("value", $this.val());
+
+            // Will user be able to remove this option?
+            if ($ul.data("select").attr("data-dynamic-opts")) {
+                $option.append("<span class=close></span>");
+                $option.find(".close").on("click", function () {
+                    $option.remove();
+                    $this.remove();
+                });
+            }
 
-      // Ss it selected?
-      if ($this.prop("selected")) {
-        $option.attr("selected", true);
-        $option.addClass("selected");
-      }
+            // Is it selected?
+            if ($this.prop("selected")) {
+                $option.attr("selected", true);
+                $option.addClass("selected");
+            }
+        }
 
-      // Append option to our dropdown
-      if ($ul.find(".dropdownjs-add").length) {
-        $ul.find(".dropdownjs-add").before($option);
-      } else {
-          if ($this.val() === "?") //Case used by angularjs to set an "empty" option when the ng-model is not definied or does not match any of the options available
-              $ul.prepend($option);
-          else {
-              $ul.append($option);
-          }
 
-          //select the newly selected option and unselect previous one (if any)
-          if ($option.hasClass("selected")) {
-              methods._select($ul.parent(), $option);
-          }
+        // Append option to our dropdown
+        if ($ul.find(".dropdownjs-add").length) {
+            $ul.find(".dropdownjs-add").before($option);
+        } else {
+            $ul.append($option);
+
+            //select the newly selected option and unselect previous one (if any)
+            if ($option.hasClass("selected")) {
+                methods._select($ul.parent(), $option);
+            }
+
+            //Re-order "li" in the same order than "options" in native "select".
+            var orderedElems = new Array();
+            $.each($this.closest("select").find("> optgroup, > option"), function (i, item) {
+                var elem = undefined;
+                if ($(item).is("optgroup")) {
+                    elem = $ul.find("span[label='" + $(item).attr("label") + "']");
+                    if (elem && elem.length > 0) {
+                        orderedElems.push(elem[0]);
+                        $.each($(item).find("option"), function(j, subItem) {
+                            var subElem = $ul.find("li[value='" + $(subItem).attr("value") + "']");
+                            if (subElem && subElem.length > 0)
+                                orderedElems.push(subElem[0]);
+                        });
+                    }
+                } else {
+                    elem = $ul.find("li[value='" + $(item).attr("value") + "']");
+                    if (elem && elem.length > 0)
+                        orderedElems.push(elem[0]);
+                }
+
+            });
+            $ul.empty().append(orderedElems);
+
+            if ($.material && $.material.ripples) {
+                $(orderedElems).each(function (index, item) {
+                    if ($(item).is("li"))
+                        $.material.ripples($(item));
+                });
+            }
+        }
 
-          //Re-order "li" in the same order than "options" in native "select".
-          var orderedLi = new Array();
-          $.each($this.closest("select").find("option"), function(i, opt) {
-              var li = $ul.find("li[value='" + $(opt).attr("value") + "']");
-              if (li.length > 0)
-                  orderedLi.push(li[0]);
-          });
-          $ul.empty().append(orderedLi);
-      }
     },
     destroy: function($e) {
       $($e).show().removeAttr('data-dropdownjs').next('.dropdownjs').remove();

From ab51af8118d6dcee1fd72149c611d2c43e9eb2fc Mon Sep 17 00:00:00 2001
From: PsyStorm25 <verbatim128@yahoo.com>
Date: Wed, 7 Sep 2016 15:11:11 +0200
Subject: [PATCH 5/5] Fixed a bug on IE.

Fixed a bug on IE when there was an empty value in the dropdown.
---
 angularjs-compatible | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/angularjs-compatible b/angularjs-compatible
index 883344e..0e005c9 100644
--- a/angularjs-compatible
+++ b/angularjs-compatible
@@ -144,7 +144,8 @@
         $ul.on("click", "li:not(.dropdownjs-add)", function(e) {
           methods._select($dropdown, $(this));
           // trigger change event, if declared on the original selector
-          $select.change();
+          //$select.change();
+          $select.trigger('change');
         });
         $ul.on("click", "span.optgroup", function (e) {
             return false;
@@ -449,7 +450,8 @@
                 $option.html("&nbsp;");
             }
             // Set the value of the option
-            $option.attr("value", $this.val());
+            var attrValue = $this.val() != "" ? $this.val() : "&nbsp;"; //Trick for IE that set a value equals to "1" when the value is empty (instead of an empty string)
+            $option.attr("value", attrValue);
 
             // Will user be able to remove this option?
             if ($ul.data("select").attr("data-dynamic-opts")) {
@@ -494,7 +496,8 @@
                         });
                     }
                 } else {
-                    elem = $ul.find("li[value='" + $(item).attr("value") + "']");
+                    var attrValueToFind = $(item).attr("value") != "" ? $(item).attr("value") : "&nbsp;"; //Trick for IE that set a value equals to "1" when the value is empty (instead of an empty string)
+                    elem = $ul.find("li[value='" + attrValueToFind + "']");
                     if (elem && elem.length > 0)
                         orderedElems.push(elem[0]);
                 }