PyWebIO Interface bug in put

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

Nov 14 '22 14:11 amks1

Would you provide a sample code to reproduce this bug?

Nov 16 '22 13:11 wang0618

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

Nov 16 '22 20:11 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'),

Nov 17 '22 13:11 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'),

Thanks, that solves the problem for now.

Nov 17 '22 13:11 amks1

Please close it if this issue is already solved.

Nov 28 '22 07:11 FHU-yezi

Please close it if this issue is already solved.

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

Nov 29 '22 00:11 amks1

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

Aug 04 '23 14:08 wang0618

Interface bug in put_select