on_change event sent twice when on_key_down is also used

[masenf]

trafficstars

Describe the bug When an input or text_area has both on_change and on_key_down handlers defined (even if they do nothing), typing into the component causes on_change to be sent twice.

To Reproduce

import reflex as rx


class State(rx.State):
    def on_key_down(self, key):
        print(f"on_key_down: {key}")

    def on_change(self, value):
        print(f"on_change: {value}")


def index() -> rx.Component:
    return rx.vstack(
        rx.input(
            placeholder="Double on_change box",
            on_change=State.on_change,
            on_key_down=State.on_key_down,
        ),
        rx.input(placeholder="Single on_change box", on_change=State.on_change),
        padding_top="5%",
    )


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

Specifics (please complete the following information):

• Python Version: 3.11.4
• Reflex Version: 0.2.0
• OS: macOS 13.4.1
• Browser (Optional): firefox

[masenf]

The bug is here: https://github.com/pynecone-io/pynecone/blob/5cbf7da952a9ebaa1c987d9e2a0208e159da6e5c/reflex/.templates/web/utils/state.js#L221-L225

In that block, we are mutating the processEvents local state variable, but then calling setState as a function of the current (pre-mutated) state known by the runtime, but this variable name shadows the name from its enclosing scope.

Using a different variable name in the setState function is sufficient to avoid this error

  setState(current_state => ({ ...current_state, events: state.events }));