[REF-554] Wrapping event triggers of React components with more than one parameter

[janhavlin]

Hello, I'm struggling with wrapping callbacks of FormSelect component from @patternfly/react-core library. The issue is that the onChange callback has two parameters ((event: React.FormEvent<HTMLSelectElement>, value: string) => void, see the docs) but I'm able to generate only one parameter in the callback in the resulting javascript code.

I have the following code:

import reflex as rx

class FormSelect(rx.Component):
    library = "@patternfly/react-core"
    tag = "FormSelect"
    value: rx.Var[str]

    @classmethod
    def get_controlled_triggers(cls) -> dict[str, rx.Var]:
        return {
            "on_change": rx.EVENT_ARG
        }

class FormSelectOption(rx.Component):
    library = "@patternfly/react-core"
    tag = "FormSelectOption"
    value: rx.Var[str]
    label: rx.Var[str]

form_select = FormSelect.create
form_select_option = FormSelectOption.create

class State(rx.State):
    selected_value: str
    def process_change(self, value):
        self.selected_value = value

def index() -> rx.Component:
    return rx.fragment(
        form_select(
            form_select_option(label='value1', value='value1'),
            form_select_option(label='value2', value='value2'),
            value=State.selected_value,
            on_change=State.process_change
        ),
    )

app = rx.App(state=State)
app.add_page(index)
app.compile()

Which results in this javascript which is not correct, onChange callback should have more than just the _e argument:

  <Fragment>
  <FormSelect onChange={_e => Event([E("state.process_change", {value:_e})], _e)} value={state.selected_value}>
  <FormSelectOption label="value1" value="value1"/>
  <FormSelectOption label="value2" value="value2"/>
</FormSelect>
</Fragment>

I was able to "fix" it with manual touches to the javascript code:

  <FormSelect onChange={(_e, v) => Event([E("state.process_change", {value: v})], _e)} value={state.selected_value}>

But I don't know how to achieve this within the python code. I tried adding an extra parameter to the python handler:

class State(rx.State):
    selected_value: str
    def process_change(self, event, value):
        self.selected_value = value

But no luck:

AssertionError: Event handler <function State.process_change at 0x7fac7bb83420> must have 1 or 2 arguments.

Thanks in advance for any help!

_REF-554

[masenf]

Unfortunately this is not supported in the current reflex version... The EVENT_ARG thing is relatively hardcoded throughout the python -> javascript translation process, but I think we should be more flexible here. It's not going to be an easy fix as far as I can tell; some refactoring will be needed to support callbacks with arbitrary number of arguments.

[Lendemor]

Will be solved by #1820