Bootstrap Dropdown Bug?

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.css">
<div class="note-editor panel panel-default" style="height: 750px;">
    <div class="note-toolbar panel-heading">
        <div class="note-style btn-group">
            <div class="btn-group" data-name="style">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" tabindex="-1" data-original-title="Style" aria-expanded="false"><i class="fa fa-magic"></i>  <span class="caret"></span>

                </button>
                <ul class="dropdown-menu">
                    <li><a data-event="formatBlock" href="#" data-value="p">Normal</a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="blockquote"><blockquote>Quote</blockquote></a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="pre">Code</a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="h1"><h1>Header 1</h1></a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="h2"><h2>Header 2</h2></a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="h3"><h3>Header 3</h3></a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="h4"><h4>Header 4</h4></a>

                    </li>
                    <li><a data-event="formatBlock" href="#" data-value="h5"><h5>Header 5</h5></a>

                    </li>
                    <li><a data-event="formatBlock" href="#"...

JavaScript

$(function () {
    var noteStyleDiv = $('.note-style');
    noteStyleDiv.off('click');
    noteStyleDiv.on('click', function (e) {
        var bgDiv = noteStyleDiv.find('div.btn-group');
        if (bgDiv.hasClass('open')) {
            bgDiv.removeClass('open');
            // i've handled closing the dropdown; no action from bootstrap required here...
            //
            // code where this is preventDefault is attempted to be respected is in Dropdown.prototype.toggle(),
            // but it replaces the event var AND THEN checks isDefaultPrevented() on it, which is always
            // false at that point since the variable has been re-assigned to a 'show' event from my 'click'                   // event. 
            //
            // end result is bootstrap toggles it back open again.
            e.preventDefault();
        }
    });
});

//bootstrap code in Dropdown.prototype.toggle():

/* 
...
if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
      }

      var relatedTarget = { relatedTarget: this }
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget)) <--- blasting my event w/ preventDefault set

      if (e.isDefaultPrevented()) return <-- always false
...
*/