Merge pull request #25 from usame-algan/master

Adds option for event bubbling

README.md

@@ -27,6 +27,7 @@ JavaScript disabled? No problem! Nicely degrades to original `<select>`.
 | Option | Required | Description                                                        |
 | ------ | -------- | ------------------------------------------------------------------ |
 | elem   | yes      | _id_ of the select you want to replace **or** a direct DOM element |
+| bubbles   | no      | Boolean indicating whether the change event of the select bubbles |
 
 ## Methods
 

src/javascript/vanilla-js-dropdown.js

@@ -12,8 +12,8 @@
  * @param {(string|Object)} options.elem - HTML id of the select or the DOM element.
  */
 var CustomSelect = function(options) {
-  var elem =
-      typeof options.elem === 'string' ? document.getElementById(options.elem) : options.elem,
+    var elem = typeof options.elem === 'string' ? document.getElementById(options.elem) : options.elem;
+    var bubbles = typeof options.bubbles === 'boolean' ? true : false,
     mainClass = 'js-Dropdown',
     titleClass = 'js-Dropdown-title',
     listClass = 'js-Dropdown-list',
@@ -117,7 +117,7 @@ var CustomSelect = function(options) {
       elem.options.selectedIndex = t.getAttribute('data-index');
 
       //trigger 'change' event
-      var evt = new CustomEvent('change');
+      var evt = bubbles ? new CustomEvent('change', {bubbles: true}) : new CustomEvent('change');
       elem.dispatchEvent(evt);
 
       // highlight the selected

test/spec/dropdown.spec.js

@@ -94,6 +94,32 @@ describe('SELECT - contains OPTGROUP', function() {
   sharedTests();
 });
 
+describe('SELECT - supports event bubbling', function() {
+  beforeEach(function() {
+    jasmine.getFixtures().fixturesPath = fixturePath;
+    loadFixtures(selectFixtureWithId);
+
+    this.original = document.getElementById('select');
+
+    this.select = new CustomSelect({
+      elem: this.original,
+      bubbles: true,
+    });
+  });
+
+  it("should create an event with the bubbles attribute if the option is passed", function() {
+    this.original.addEventListener('change', function(event) {
+      expect(event.bubbles).toBe(true);
+    });
+
+    var spyEvent = spyOnEvent('.js-Dropdown-list li:eq(3)', 'click');
+    $('.js-Dropdown-list li:eq(3)').click();
+
+    expect('click').toHaveBeenTriggeredOn('.js-Dropdown-list li:eq(3)');
+    expect(spyEvent).toHaveBeenTriggered();
+  });
+});
+
 function sharedTests() {
   describe('original select', function() {
     it('markup should be present', function() {