<select>: option is not not selected if value is an integer

I found some strange behavior where I am not sure what part of lona may be the problem. See the following reproducer:

from lona.html import HTML, Option, Select
from lona import LonaApp, LonaView


app = LonaApp(__file__)


@app.route('/')
class MyView(LonaView):
    def handle_request(self, request):
        html =HTML(
            sel := Select(bubble_up=True)
        )
        sel.append(Option("Text 1", value="a"))
        sel.append(Option("Text 2", value="b"))
        sel.append(Option("Danger", value=3))

        while True:
            event = self.await_input_event(html=html)
            print(sel.value)

app.run(port=8080)

When surfing to the view the Text 1 Option is shown inside the <select>. When I now drop the menu down and select Text 2 b is printed to the console. Selecting Text 1 prints a, as expected. When selecting Danger, however, the value printed is a, not 3 as expected.

Frontend-to-server communication looks valid. But I noticed that my 3 get’s transferred as a string on the websocket.

I have traced this problem down to https://github.com/lona-web-org/lona/blob/5af71684d345f6b4f8bc79cd4d880971a30f2e2e/lona/html/data_binding/select.py#L122 . It seems the selection from the frontend is not represented in the corresponding Option: In line 124 of that file value is empty.

Using a str(3) or "3" instead of the integer works as expected. From a user perspective it should not matter if I put an integer or string in there. (It would actually come in handy since I could use the primary keys from my db in there 😄 )

[maratori]

@fscherf Yeah, sure.

[fscherf]

@SmithChart: I started working on this yesterday and realized that the whole API of html.Select is quite confusing and unpractical, so i refactored the whole thing, with your issue addressed as well. Currently there is not much documentation (only in the patch description) but at this moment it’s only a proposal.

Branch: https://github.com/lona-web-org/lona/tree/fscherf/topic/refactor-select-api

@maratori, @grigolet, @laundmo: Would you mind to have a look too?