provide native select component as fallback

Author: wang0618

pywebio/session/__init__.py

@@ -517,6 +517,8 @@ def set_env(**env_info):
     * ``input_auto_focus`` (bool): Whether to focus on input automatically after showing input panel, default is ``True``
     * ``output_max_width`` (str): The max width of the page content area (in pixel or percentage,
       e.g. ``'1080px'``, ``'80%'``. Default is 880px).
+    * ``native_select`` (bool): Whether to use native select component, default is ``False`` . It's a fallback in case
+        the default select component is not rendered correctly in some cases.
 
     Example::
 
@@ -528,7 +530,8 @@ def set_env(**env_info):
     """
     from ..io_ctrl import send_msg
     assert all(k in ('title', 'output_animation', 'auto_scroll_bottom', 'http_pull_interval', 'output_max_width',
-                     'input_panel_min_height', 'input_panel_init_height', 'input_panel_fixed', 'input_auto_focus')
+                     'input_panel_min_height', 'input_panel_init_height', 'input_panel_fixed', 'input_auto_focus',
+                     'native_select')
                for k in env_info.keys())
     send_msg('set_env', spec=env_info)
 

webiojs/src/handlers/env.ts

@@ -26,6 +26,10 @@ export class EnvSettingHandler implements CommandHandler {
             }
         }
 
+        if (spec.native_select !== undefined) {
+            config.disableSelectPicker = spec.native_select;
+        }
+
         if (spec.http_pull_interval !== undefined) {
             if (state.CurrentSession instanceof HttpSession)
                 state.CurrentSession.change_pull_interval(spec.http_pull_interval);

webiojs/src/models/input/select.ts

@@ -1,5 +1,6 @@
 import {InputItem} from "./base";
 import {deep_copy, make_set} from "../../utils"
+import {config} from "../../state";
 
 const options_tpl = `
 {{#options}}
@@ -36,8 +37,10 @@ export class Select extends InputItem {
         this.element = $(html);
         this.setup_select_options(this.element, spec.options);
 
-        // @ts-ignore
-        this.element.find('select').selectpicker();
+        if (!config.disableSelectPicker) {
+            // @ts-ignore
+            this.element.find('select').selectpicker();
+        }
 
         if (spec.onblur) {
             // blur事件时，发送当前值到服务器
@@ -68,8 +71,10 @@ export class Select extends InputItem {
             input_elem.attr(key, this.spec[key]);
         }
 
-        // @ts-ignore
-        input_elem.selectpicker('refresh');
+        if (!config.disableSelectPicker) {
+            // @ts-ignore
+            input_elem.selectpicker('refresh');
+        }
     }
 
     update_input(spec: any): any {
@@ -94,8 +99,10 @@ export class Select extends InputItem {
                     $(this).prop('selected', true);
                 }
             });
-            // @ts-ignore
-            this.element.find('select').selectpicker('render');
+            if (!config.disableSelectPicker) {
+                // @ts-ignore
+                this.element.find('select').selectpicker('render');
+            }
             delete attributes['value'];
         }
 
@@ -104,10 +111,11 @@ export class Select extends InputItem {
 
     on_reset(e: any) {
         // need to wait some time to get the select element be reset, and then update `selectpicker`
-        setTimeout(() => {
-            // @ts-ignore
-            this.element.find('select').selectpicker('render');
-        }, 100)
+        if (!config.disableSelectPicker)
+            setTimeout(() => {
+                // @ts-ignore
+                this.element.find('select').selectpicker('render');
+            }, 100)
     }
 
     get_value(): any {

webiojs/src/state.ts

@@ -7,15 +7,16 @@ export let state = {
     ShowDuration: 200,  // ms, 显示表单的过渡动画时长
     InputPanelMinHeight: 300,  // 输入panel的最小高度
     InputPanelInitHeight: 300,  // 输入panel的初始高度
-    FixedInputPanel:true,
-    AutoFocusOnInput:true,
+    FixedInputPanel: true,
+    AutoFocusOnInput: true,
 };
 
 // App config
 export let config = {
     codeMirrorModeURL: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/%N/%N.min.js",
     codeMirrorThemeURL: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/%N.min.css",
     outputAnimation: true, // 启用内容输出动画
+    disableSelectPicker: false,
     httpPullInterval: 1000,  // HttpSession 拉取消息的周期（ms）
     debug: false,  // 调试模式， 打印所有交互的消息
 };