justpy-org / justpy

An object oriented high-level Python Web Framework that requires no frontend programming
https://justpy.io
Apache License 2.0
1.22k stars 96 forks source link

default option selection for select component #379

Closed sandeep-gh closed 2 years ago

sandeep-gh commented 2 years ago

The standard way to specify a default selected option is to specify selected="selected" attribute value for the option. However, this isn't working. I still get a blank default option with the specified option listed below. The attribute selected works outside of justpy as expected. Attached is a minimum working example taken from the justpy tutorial:

import justpy as jp

def change_color(self, msg):
    self.color_div.set_class(f'bg-{self.value}-600')

def comp_test():
    wp = jp.WebPage()
    colors = ['red', 'green', 'blue', 'pink', 'yellow', 'teal', 'purple']
    select = jp.Select(classes='w-32 text-xl m-4 p-2 bg-white  border rounded', a=wp,
                  change=change_color)
    color = 'gray'
    select.add(jp.Option(value=color, text=color, selected="selected", classes=f'bg-{color}-600'))
    for color in colors:
        select.add(jp.Option(value=color, text=color, classes=f'bg-{color}-600'))
    select.color_div = jp.Div(classes='bg-red-600 w-32 h-16 m-4',a=wp)
    return wp

app =jp.app
jp.justpy(comp_test, start_server=False)
Phonix88 commented 2 years ago

Hi, you can use value=xxx

import justpy as jp

def change_color(self, msg):
    self.color_div.set_class(f'bg-{self.value}-600')

def comp_test():
    wp = jp.WebPage()
    colors = ['red', 'green', 'blue', 'pink', 'yellow', 'teal', 'purple']
    select = jp.Select(classes='w-32 text-xl m-4 p-2 bg-white  border rounded', a=wp,
                  change=change_color, value='blue')
    color = 'gray'
    select.add(jp.Option(value=color, text=color, selected="selected", classes=f'bg-{color}-600'))
    for color in colors:
        select.add(jp.Option(value=color, text=color, classes=f'bg-{color}-600'))
    select.color_div = jp.Div(classes='bg-red-600 w-32 h-16 m-4',a=wp)
    select.color_div.set_class(f'bg-{select.value}-600')
    return wp

app =jp.app
jp.justpy(comp_test)
sandeep-gh commented 2 years ago

@Phonix88 , Thank you. That works. Will close this.