use bootstrap-select replace native select input

Author: wang0618

pywebio/html/css/bootstrap-select.min.css

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="{{ base_url }}css/codemirror.min.css">
     <link rel="stylesheet" href="{{ base_url }}css/toastify.min.css">
     <link rel="stylesheet" href="{{ base_url }}css/bs-theme/{{ theme }}.min.css">
+    <link rel="stylesheet" href="{{ base_url }}css/bootstrap-select.min.css">
     <link rel="stylesheet" href="{{ base_url }}css/app.css">
     {% for css in css_file %}
         {% if css %}<link rel="stylesheet" href="{{ css }}">{% end %}
@@ -56,6 +57,7 @@
 <script src="{{ base_url }}js/toastify.min.js"></script> <!-- toast -->
 <script src="{{ base_url }}js/bs-custom-file-input.min.js"></script> <!-- bootstrap custom file input-->
 <script src="{{ base_url }}js/purify.min.js"></script>  <!-- XSS sanitizer -->
+<script src="{{ base_url }}js/bootstrap-select.min.js"></script>
 <script>
     if (window.navigator.userAgent.indexOf('MSIE ') !== -1 || window.navigator.userAgent.indexOf('Trident/') !== -1)
         $('#output-container').html('<div class="alert alert-danger" role="alert"> Sorry, this website does not support IE browser. ☹ </div>');

pywebio/html/js/bootstrap-select.min.js

@@ -50,6 +50,7 @@
             "html/css/toastify.min.css",
             "html/css/app.css",
             "html/css/codemirror.min.css",
+            "html/css/bootstrap-select.min.css",
             "html/css/bs-theme/default.min.css",
             "html/css/bs-theme/minty.min.css",
             "html/css/bs-theme/yeti.min.css",
@@ -68,6 +69,7 @@
             "html/js/toastify.min.js",
             "html/js/require.min.js",
             "html/js/codemirror.min.js",
+            "html/js/bootstrap-select.min.js",
             "html/image/favicon_open_16.png",
             "html/image/favicon_closed_32.png",
             "platform/tpl/index.html"

pywebio/platform/tpl/index.html

@@ -709,7 +709,7 @@ def test_input(browser: Chrome, enable_percy=False):
 
     browser.find_element_by_name('password').clear()
     browser.find_element_by_name('password').send_keys("123")
-    browser.execute_script("$('form button').eq(1).click()")
+    browser.execute_script("$('form button[type=\"submit\"]').eq(1).click()")
     time.sleep(1)
     browser.execute_script('$("html, body").scrollTop( $(document).height()+100);')
     time.sleep(1)

setup.py

@@ -17,6 +17,9 @@ const select_input_tpl = `
     <small id="{{id_name}}_help" class="form-text text-muted">{{help_text}}</small>
 </div>`;
 
+// @ts-ignore
+$.fn.selectpicker.Constructor.BootstrapVersion = '4';
+
 export class Select extends InputItem {
     static accept_input_types: string[] = ["select"];
 
@@ -44,6 +47,8 @@ export class Select extends InputItem {
                 this.on_input_event("change", this);
             });
         }
+        // @ts-ignore
+        this.element.find('select').selectpicker();
         return this.element;
     }