fix: issue with input and change event for angular, lit, stencil & ht…

…ml (#1552) * fix: issue with input and change event for angular, lit, stencil & html * chore: format code and add changeset * chore: update changeset to use patch instead on minor * chore: update from main * chore: update snapshots * chore: update snapshots * 🏃 --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Nov 1, 2024 · 068be0d · 068be0d
1 parent b5ddfa3
commit 068be0d
Show file tree

Hide file tree

Showing 36 changed files with 3,352 additions and 655 deletions.
diff --git a/.changeset/two-crabs-approve.md b/.changeset/two-crabs-approve.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Angular, Lit, Stencil, HTML] fix: remove mapping onChange to input event 
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1806,6 +1806,32 @@ exports[`Alpine.js > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > eventInputAndChange 1`] = `
+"<style>
+  .input {
+    color: red;
+  }
+</style>
+<div x-data=\\"eventInputAndChange()\\">
+  <input
+    class=\\"input\\"
+    x-bind:value=\\"name\\"
+    x-on:input=\\"name = $event.target.value\\"
+    x-on:change=\\"name = $event.target.value\\"
+  />
+
+  Hello! I can run in React, Vue, Solid, or Liquid!
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"eventInputAndChange\\", () => ({
+      name: \\"Steve\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>
@@ -4771,6 +4797,32 @@ exports[`Alpine.js > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > eventInputAndChange 1`] = `
+"<style>
+  .input {
+    color: red;
+  }
+</style>
+<div x-data=\\"eventInputAndChange()\\">
+  <input
+    class=\\"input\\"
+    x-bind:value=\\"name\\"
+    x-on:input=\\"name = $event.target.value\\"
+    x-on:change=\\"name = $event.target.value\\"
+  />
+
+  Hello! I can run in React, Vue, Solid, or Liquid!
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"eventInputAndChange\\", () => ({
+      name: \\"Steve\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>