Replace bootstrap-select with the native <select> element

static/css/base.css

@@ -346,9 +346,3 @@ input[type=number]::-webkit-inner-spin-button {
 select.form-control {
     background-color: var(--panel-bg);
 }
-
-/* Fix outline on focused select.selectpicker  */
-.bootstrap-select .dropdown-toggle:focus {
-    outline: 0 !important;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 4px rgba(102, 175, 233, 0.2);
-}

static/css/bootstrap-colors.css

@@ -24,26 +24,6 @@
     background-color: var(--btn-default-bg);
 }
 
-.open > .dropdown-toggle.btn-default,
-.open > .dropdown-toggle.btn-default:active,
-.open > .dropdown-toggle.btn-default:hover,
-.open > .dropdown-toggle.btn-default:focus {
-    color: var(--btn-active-color);
-    background-color: var(--btn-active-bg);
-    border-color: var(--btn-active-border);
-}
-
-.bootstrap-select > .dropdown-toggle.bs-placeholder,
-.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
-.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
-.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
-    color:  var(--btn-default-color);
-}
-
-.bootstrap-select .no-results {
-    background:  var(--panel-bg);
-}
-
 .alert-info {
     background-color: var(--state-info-bg);
     border-color: var(--state-info-border);

static/css/webhook_form.css

@@ -2,10 +2,6 @@
      width: 900px;
 }
 
-#add-webhook-form div.bootstrap-select {
-    width: 100px;
-}
-
 .method-url-group {
     display: flex;
 }

static/js/details.js

@@ -166,7 +166,6 @@ $(function () {
         transferFormLoadStarted = true;
         $.get(this.dataset.url, function(data) {
             $("#transfer-modal" ).html(data);
-            $("#target-project").selectpicker();
         });
     });
 

templates/accounts/project.html

@@ -609,7 +609,8 @@
                             id="new-owner"
                             name="email"
                             title="Select..."
-                            class="form-control selectpicker">
+                            class="form-control">
+                            <option></option>
                             {% for m in memberships %}
                             <option>{{ m.user.email }}</option>
                             {% endfor %}
@@ -643,7 +644,6 @@
 
 {% block scripts %}
 {% compress js %}
-<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
 <script src="{% static 'js/project.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/base.html

@@ -20,7 +20,6 @@
     {% block head %}{% endblock %}
     {% compress css %}
     <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css">
-    <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/selectize.hc.css' %}" type="text/css">
 
     <link rel="stylesheet" href="{% static 'css/variables.css' %}" type="text/css">

templates/front/details.html

@@ -353,7 +353,6 @@
 <script id="all-timezones" type="data">UTC,{{ timezones|join:"," }}</script>
 {% compress js %}
 <script src="{% static 'js/selectize.min.js' %}"></script>
-<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 <script src="{% static 'js/moment.min.js' %}"></script>

templates/front/my_checks.html

@@ -93,7 +93,6 @@
 {% block scripts %}
 <script id="all-timezones" type="data">UTC,{{ timezones|join:"," }}</script>
 {% compress js %}
-<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
 <script src="{% static 'js/selectize.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/purify.min.js' %}"></script>

templates/front/transfer_modal.html

@@ -30,18 +30,15 @@
                         id="target-project"
                         name="project"
                         title="Select..."
-                        class="form-control selectpicker">
+                        class="form-control">
+                        <option></option>
                         {% for project in request.profile.projects.all %}
                             {% if project == check.project %}
-                                <option disabled data-subtext="(current project)">
-                                    {{ project }}
-                                </option>
+                                <option disabled>{{ project }} (current project)</option>
                             {% elif project.owner_id == check.project.owner_id or project.num_checks_available > 0 %}
                                 <option value="{{ project.code }}">{{ project }}</option>
                             {% else %}
-                                <option disabled data-subtext="(at check limit)">
-                                    {{ project }}
-                                </option>
+                                <option disabled>{{ project }} (at check limit)</option>
                             {% endif %}
                         {% endfor %}
                     </select>

templates/integrations/add_telegram.html

@@ -33,8 +33,8 @@
         {% csrf_token %}
         <div class="form-group">
             <label class="col-sm-3 control-label">Project</label>
-            <div class="col-sm-8">
-                <select name="project" class="selectpicker">
+            <div class="col-sm-6 col-lg-4">
+                <select name="project" class="form-control">
                     {% for project in projects %}
                     <option value="{{ project.code }}">{{ project }}</option>
                     {% endfor %}
@@ -122,10 +122,4 @@
     {% endif %}
 </div>
 </div>
-{% endblock %}
-
-{% block scripts %}
-{% compress js %}
-<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
-{% endcompress %}
-{% endblock %}
+{% endblock %}