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

importReactfrom"react";importReactDOMfrom"react-dom";importhtmfrom"htm";consthtml=htm.bind(React.createElement);exportfunctionbind(node,config){return{create: (type,props,children)=>React.createElement(type,props, ...children),render: (element)=>ReactDOM.render(element,node),unmount: ()=>ReactDOM.unmountComponentAtNode(node),}}exportfunctionTextField(attrs){returnhtml`<div><inputtype="text" ...${attrs}></div>`;}

frompathlibimportPathfromtypingimportAnyfromreactpy.web.moduleimportexport, module_from_filefromreactpyimportcomponent_js_module=module_from_file(
"reactpy-events-problem",
file=Path(__file__).parents[0] /"bundle.js"
)
new_text_field=export(_js_module, "TextField")
@componentdeftext_field(attrs: Any={}):
returnnew_text_field(attrs)

And when you try to use it like that

fromreactpyimportcomponent, run, html, use_statefromreactpy_events_problemimporttext_field@componentdefapp():
text, set_text=use_state("Text")
returnhtml.div(
html.h1(text),
text_field(
attrs={
"value": text,
"onChange": lambdae: 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

importnodeResolvefrom"@rollup/plugin-node-resolve";importcommonjsfrom"@rollup/plugin-commonjs";importbabelfrom"@rollup/plugin-babel";importreplacefrom"@rollup/plugin-replace";exportdefault{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 modulereturn;}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!