feat: use forms in templates (#331)

* Update code snippets to use the platform * Add change
tauri-apps · Feb 13, 2023 · 4beabe2 · 4beabe2
1 parent 03d4025
commit 4beabe2
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 35 deletions.
diff --git a/.changes/platform.md b/.changes/platform.md
@@ -0,0 +1,6 @@
+---
+"create-tauri-app": "patch"
+"create-tauri-app-js": "patch"
+---
+
+Fix generated output to use HTML forms properly.
diff --git a/packages/cli/fragments/fragment-next-ts/src/pages/index.tsx b/packages/cli/fragments/fragment-next-ts/src/pages/index.tsx
@@ -57,16 +57,19 @@ function App() {
       <p>Click on the Tauri, Next, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>

diff --git a/packages/cli/fragments/fragment-next/src/pages/index.jsx b/packages/cli/fragments/fragment-next/src/pages/index.jsx
@@ -57,16 +57,19 @@ function App() {
       <p>Click on the Tauri, Next, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>

diff --git a/packages/cli/fragments/fragment-preact-ts/src/app.tsx b/packages/cli/fragments/fragment-preact-ts/src/app.tsx
@@ -30,16 +30,19 @@ export function App<FC>() {
       <p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
 
       <div class="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
       <p>{greetMsg}</p>
     </div>

diff --git a/packages/cli/fragments/fragment-preact/src/app.jsx b/packages/cli/fragments/fragment-preact/src/app.jsx
@@ -30,16 +30,19 @@ export function App() {
       <p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
 
       <div class="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
       <p>{greetMsg}</p>
     </div>

diff --git a/packages/cli/fragments/fragment-react-ts/src/App.tsx b/packages/cli/fragments/fragment-react-ts/src/App.tsx
@@ -31,16 +31,19 @@ function App() {
       <p>Click on the Tauri, Vite, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
       <p>{greetMsg}</p>
     </div>

diff --git a/packages/cli/fragments/fragment-react/src/App.jsx b/packages/cli/fragments/fragment-react/src/App.jsx
@@ -31,16 +31,19 @@ function App() {
       <p>Click on the Tauri, Vite, and React logos to learn more.</p>
 
       <div className="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>

diff --git a/packages/cli/fragments/fragment-solid/src/App.jsx b/packages/cli/fragments/fragment-solid/src/App.jsx
@@ -31,16 +31,19 @@ function App() {
       <p>Click on the Tauri, Vite, and Solid logos to learn more.</p>
 
       <div class="row">
-        <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
           <input
             id="greet-input"
             onChange={(e) => setName(e.currentTarget.value)}
             placeholder="Enter a name..."
           />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
+          <button type="submit">Greet</button>
+        </form>
       </div>
 
       <p>{greetMsg}</p>