use bootstrap-select replace native select input

pywebio/platform/tpl/index.html

@@ -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>');

setup.py

@@ -50,6 +50,7 @@ setup(
             "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 @@ setup(
             "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"

test/18.pin_test.py

@@ -71,7 +71,7 @@ def test_one_page(browser: Chrome):
     browser.find_element_by_css_selector('[name=checkbox_inline]').click()
     browser.find_element_by_css_selector('[name=radio]').click()
     browser.find_element_by_css_selector('[name=radio_inline]').click()
-    browser.find_element_by_css_selector('button').click()
+    browser.find_element_by_css_selector('button[type=\"submit\"]').click()
     codeMirror = browser.find_element_by_css_selector(".CodeMirror pre")
     action_chains = ActionChains(browser)
     action_chains.move_to_element(codeMirror).click(codeMirror).send_keys('3').perform()

test/template.py

@@ -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)

webiojs/src/models/input/select.ts

@@ -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"];
 
@@ -33,6 +36,9 @@ export class Select extends InputItem {
         this.element = $(html);
         this.setup_select_options(this.element, spec.options);
 
+        // @ts-ignore
+        this.element.find('select').selectpicker();
+
         if(spec.onblur) {
             // blur事件时，发送当前值到服务器
             this.element.find('select').on("blur", (e) => {
@@ -85,6 +91,8 @@ export class Select extends InputItem {
                     $(this).prop('selected', true);
                 }
             });
+            // @ts-ignore
+            this.element.find('select').selectpicker('render');
             delete attributes['value'];
         }