reflex-dev/reflex · error · ValueError

Cannot combine `enter_key_submit` with `on_key_down`.

Error message

Cannot combine `enter_key_submit` with `on_key_down`.

What it means

rx.el.text_area's enter_key_submit helper installs its own on_key_down handler; passing on_key_down explicitly would conflict, so Reflex rejects the combination.

Source

Thrown at packages/reflex-components-core/src/reflex_components_core/el/elements/forms.py:982

        Args:
            *children: The children of the textarea.
            **props: The properties of the textarea.

        Returns:
            The textarea component.

        Raises:
            ValueError: when `enter_key_submit` is combined with `on_key_down`.
        """
        enter_key_submit = props.get("enter_key_submit")
        auto_height = props.get("auto_height")
        custom_attrs = props.setdefault("custom_attrs", {})

        if enter_key_submit is not None:
            enter_key_submit = Var.create(enter_key_submit)
            if "on_key_down" in props:
                msg = "Cannot combine `enter_key_submit` with `on_key_down`."
                raise ValueError(msg)
            custom_attrs["on_key_down"] = Var(
                _js_expr=f"(e) => enterKeySubmitOnKeyDown(e, {enter_key_submit!s})",
                _var_data=VarData.merge(enter_key_submit._get_all_var_data()),
            )
        if auto_height is not None:
            auto_height = Var.create(auto_height)
            custom_attrs["on_input"] = Var(
                _js_expr=f"(e) => autoHeightOnInput(e, {auto_height!s})",
                _var_data=VarData.merge(auto_height._get_all_var_data()),
            )
        return super().create(*children, **props)

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "auto_height",
            "enter_key_submit",
        ]

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Drop on_key_down and implement key handling inside a single custom on_key_down that also calls enterKeySubmitOnKeyDown logic
2. Or drop enter_key_submit and pass on_key_down=(e) => enterKeySubmitOnKeyDown(e, handler) plus your logic via a custom handler
3. Use a wrapping div with its own key handler for non-conflicting keys

Example fix

# before
rx.el.text_area(enter_key_submit=True, on_key_down=State.on_key)
# after
rx.el.text_area(enter_key_submit=True, on_blur=State.on_blur)  # or move key handling into a single custom on_key_down

if enter_key_submit and 'on_key_down' in kwargs:
    raise ValueError('pick one: enter_key_submit or custom on_key_down')
rx.el.text_area(..., **kwargs)

When it happens

Trigger: Calling rx.el.text_area(..., enter_key_submit=True, on_key_down=State.handle_key) — both props target the same DOM event.

Common situations: Adding custom keyboard shortcuts (e.g. Escape to clear) to a textarea that already uses enter_key_submit for chat-style submit behavior.

Related errors

• ChildrenTypeError(component=cls.__name__, child=child)
• Do not override _add_style directly. Use add_style instead.
• The component `{comp_name}` cannot have `{child_name}` as a
• The component `{comp_name}` only allows the components: {val
• The component `{child_name}` can only be a child of the comp

AI-assisted analysis of reflex-dev/reflex@45b8ed5ab7 (2026-08-28). Data as JSON: /api/errors/f95719b8ac8b1c7f. Report an issue: GitHub.