Bug in events of custom components

[williamneto]

So, while developing reactpy-material i faced a problem that might be related to the reactpy architecture for custom components.

To showcase the problem i created this small component, just a normal textfield. The problem is when attaching a on_change event to this custom component, the event on the page doesn't behavior as expected. Each time you type in the field (and trigger the onChange event) the page focus is moved out of the input element.

So, a simple custom TextField like that

import React from "react";
import ReactDOM from "react-dom";
import htm from "htm";

const html = htm.bind(React.createElement);

export function bind(node, config) {
  return {
    create: (type, props, children) => React.createElement(type, props, ...children),
    render: (element) => ReactDOM.render(element, node),
    unmount: () => ReactDOM.unmountComponentAtNode(node),
  }
}

export function TextField(attrs) {
  return html`
    <div>
      <input type="text" ...${attrs}>
    </div>`;
}

from pathlib import Path
from typing import Any
from reactpy.web.module import export, module_from_file
from reactpy import component

_js_module = module_from_file(
    "reactpy-events-problem",
    file=Path(__file__).parents[0] / "bundle.js"
)

new_text_field = export(_js_module, "TextField")

@component
def text_field(attrs: Any ={}):
    return new_text_field(attrs)

And when you try to use it like that

from reactpy import component, run, html, use_state
from reactpy_events_problem import text_field

@component
def app():
    text, set_text = use_state("Text")

    return html.div(
        html.h1(text),
        text_field(
            attrs={
                "value": text,
                "onChange": lambda e: set_text(e["target"]["value"])
            }
        )
    )

run(app)

You end up with this weird behavior at the page focus, making type in this field very unpratical

[Archmonger]

I have confirmed this issue exists using the following package.json

{
  "main": "src/index.js",
  "type": "module",
  "scripts": {
    "build": "rollup --config"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.23.6",
    "@babel/preset-react": "^7.23.3",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-replace": "^5.0.2",
    "@types/react": "^17.0",
    "@types/react-dom": "^17.0",
    "prettier": "^3.0.2",
    "rollup": "^3.28.1",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.23",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "htm": "^3.1.1",
    "react": ">=16 <18",
    "react-dom": ">=16 <18",
    "rollup": "^4.9.5"
  }
}

and the following rollup.config.js

import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import replace from "@rollup/plugin-replace";

export default {
	input: "src/index.js",
	output: {
		file: "bundle.js",
		format: "esm",
	},
	plugins: [
		nodeResolve({
			extensions: [".js", ".jsx"],
		}),
		babel({
			babelHelpers: "bundled",
			presets: ["@babel/preset-react"],
			extensions: [".js", ".jsx"],
		}),
		commonjs(),
		replace({
			preventAssignment: false,
			"process.env.NODE_ENV": '"development"',
		}),
	],
	onwarn: function (warning) {
		if (warning.code === "THIS_IS_UNDEFINED") {
			// skip warning where `this` is undefined at the top level of a module
			return;
		}
		console.warn(warning.message);
	},
};

[Archmonger]

Now time to try and figure out why 🤔

[pingf]

I'm wrapping the mantine libs for reactpy and also have this problem, which makes the input extremly frustrated.

for me, I've tested 3 cases

• using the python input component built from make_vdom_constructor , works well, focus remain on the component
• using the js component import from export(_js_module, 'xxxx'), focus lost
• put the python input component into one js component as the children, focus lost

right now , I have to stay away from binding state to the js input component, but add a button to capture the value from the input T^T...

[Archmonger]

Fixed in v1.1.0 of ReactPy!