Add event listeners properly (pyscript#424)

woxtu · web-flow · commit e95b90363e8f · 2022-05-19T17:56:53.000-03:00
diff --git a/pyscriptjs/src/components/pybutton.ts b/pyscriptjs/src/components/pybutton.ts
@@ -51,15 +51,16 @@ export class PyButton extends BaseEvalElement {
 
         this.appendChild(mainDiv);
         this.code = this.code.split('self').join(this.mount_name);
-        let registrationCode = `${this.mount_name} = Element("${mainDiv.id}")`;
+        let registrationCode = `from pyodide import create_proxy`;
+        registrationCode += `\n${this.mount_name} = Element("${mainDiv.id}")`;
         if (this.code.includes('def on_focus')) {
             this.code = this.code.replace('def on_focus', `def on_focus_${this.mount_name}`);
-            registrationCode += `\n${this.mount_name}.element.addEventListener('focus', on_focus_${this.mount_name})`;
+            registrationCode += `\n${this.mount_name}.element.addEventListener('focus', create_proxy(on_focus_${this.mount_name}))`;
         }
 
         if (this.code.includes('def on_click')) {
             this.code = this.code.replace('def on_click', `def on_click_${this.mount_name}`);
-            registrationCode += `\n${this.mount_name}.element.addEventListener('click', on_click_${this.mount_name})`;
+            registrationCode += `\n${this.mount_name}.element.addEventListener('click', create_proxy(on_click_${this.mount_name}))`;
         }
 
         // now that we appended and the element is attached, lets connect with the event handlers
diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts
@@ -34,10 +34,11 @@ export class PyInputBox extends BaseEvalElement {
         // defined for this widget
         this.appendChild(mainDiv);
         this.code = this.code.split('self').join(this.mount_name);
-        let registrationCode = `${this.mount_name} = Element("${mainDiv.id}")`;
+        let registrationCode = `from pyodide import create_proxy`;
+        registrationCode += `\n${this.mount_name} = Element("${mainDiv.id}")`;
         if (this.code.includes('def on_keypress')) {
             this.code = this.code.replace('def on_keypress', `def on_keypress_${this.mount_name}`);
-            registrationCode += `\n${this.mount_name}.element.addEventListener('keypress', on_keypress_${this.mount_name})`;
+            registrationCode += `\n${this.mount_name}.element.addEventListener('keypress', create_proxy(on_keypress_${this.mount_name}))`;
         }
 
         // TODO: For now we delay execution to allow pyodide to load but in the future this
