Interface bug in put_select

[amks1]

I have arranged rows of put_select as follows:

The first put_select (against test_000) contains 20 items already selected. The remaining have less than this. (upto 15).
You can see the interface bug here, which happens when I click to open the selection:

The video given in this link describes it better: https://www.loom.com/share/3d88313a20ea4851b9b0e5d7fe12d855

Environment Information

• OS and Version: Windows 10
• Browser and Version: Chrome Version 107.0.5304.106 (Official Build) (64-bit)
• Python Version: 3.9.13
• PyWebIO Version: 1.7.0

[wang0618]

Would you provide a sample code to reproduce this bug?

[amks1]

@wang0618 here it is:

import pywebio

def test_app(items_list, existing_items):

    def submit():
        pass

    items_list = sorted(list(set(items_list)))
    options_for_users = {}
    for user in existing_items:
        options_for_users[user] = []
        for item in items_list:
            options_for_users[user].append({
                'label': item,
                'value': item,
                'selected': item in existing_items[user]
            })

    col_sizes = "20% 5% 60% 15%"
    headers = [
        pywebio.output.put_markdown("#### User"), None,
        pywebio.output.put_markdown("#### Test Select"), None,
    ]
    pywebio.output.put_scope('input_table_area')
    pywebio.output.put_row(headers, size=col_sizes)
    for i in range(5):
        user = f'test_00{i+1}'
        pywebio.output.put_row(
            [
                pywebio.output.put_text(user), None, 
                pywebio.pin.put_select(f'items_{user}', options_for_users.get(user, items_list), multiple=True), None
            ], 
            size=col_sizes
        )
    pywebio.output.put_scope('button_area')
    with pywebio.output.use_scope('button_area'):
        pywebio.output.put_html('<hr>')
        pywebio.output.put_button("Button1", color='success', onclick=submit)


if __name__ == '__main__':
    items_list = [
        '204', '201', '8021', '704', '103', '2304', '1501', '2402', '1702', 
        '8281', '402', '1601', '403', '5019', '1001', '1101', '8381', '1103', 
        '1102', '1002', '1104', '603', '602', '601', '705', '605', '606', '8011', 
        '8024', '8022', '8025', '8023', '8041', '8031', '8352', '8351', '8681', 
        '8161', '8141', '8051', '8071', '8061', '8091', '8092', '8311', '8081', 
        '8591', '8101', '8111', '8171', '8121', '8131', '8151', '8231', '8191', 
        '8513', '8301', '8221', '8172', '8181', '8201', '8211', '8241', '8251', 
        '8261', '8271', '8331', '8321', '8361', '8581', '8382', '8307', '8306', 
        '8291', '8304', '8308', '8305', '8302', '8303', '8309', '8341', '8371', 
        '8391', '8401', '8411', '841', '8421', '8431', '8432', '8441', '8451', 
        '8461', '8471', '8481', '8482', '8491', '8501', '8511', '8512', '8521', 
        '8531', '8532', '8533', '8534', '8541', '8551', '8571', '8601', '8611', 
        '8621', '8631', '8641', '8661', '8671'
    ]
    existing_items = {
        'test_001': ['8041', '8181', '8191', '8201', '8301', '8302', '8303', '8304', '8305', '8306', '8307', '8308', '8309', '8311', '8321', '8331', '8341', '8431', '8451', '8471'],
        'test_002': ['8171', '8172', '8351', '8352', '8361', '8371', '8381', '8382', '8391', '841', '8411', '8511', '8512', '8513', '8671'],
        'test_003': ['8051', '8061', '8221', '8231', '8241', '8251', '8261', '8271'],
        'test_004': ['8081', '8091', '8092', '8101', '8111', '8121', '8131', '8141', '8151', '8161', '8521', '8571', '8621', '8631', '8641'],
        'test_005': ['8011', '8021', '8022', '8023', '8024', '8025', '8031', '8071', '8281', '8581', '8591', '8681']
    }
    test_app(items_list, existing_items)

[wang0618]

It's a bug, I will found a way to fix it. By the way, setting a appropriate width to put_select can avoid this issue:

pywebio.pin.put_select(f'items_{user}', options_for_users.get(user, items_list), multiple=True).style('width: 400px'),

[amks1]

It's a bug, I will found a way to fix it. By the way, setting a appropriate width to put_select can avoid this issue:

pywebio.pin.put_select(f'items_{user}', options_for_users.get(user, items_list), multiple=True).style('width: 400px'),

Thanks, that solves the problem for now.

[FHU-yezi]

Please close it if this issue is already solved.

[amks1]

Please close it if this issue is already solved.

The bug still exists, but we can work around it using the method you mentioned.

[wang0618]

Some update:
In latest PyWebIO, you can use pywebio.pin.put_select(native=True) to use the web browser's native select widget, it has no styling problems, but the browser's built-in multi-select widget is a bit ugly

Doc: https://pywebio.readthedocs.io/en/latest/pin.html#pywebio.pin.put_select
A demo: https://s.pywebio.online/1679b920d8dbd74c48b7eb715a51245c