prevent hitting enter to submit a form

Author: bohnacker

dist/index.js

@@ -712,6 +712,11 @@
     	}
 
     	function keydownHandler(ev) {
+    		// prevent submitting if the number spinner is inside a form element
+    		if (ev.key == "Enter") {
+    			ev.preventDefault();
+    		}
+
     		if (ev.target == dragElement || ev.target == editElement) {
     			dispatch("consoleLog", ev.type);
     		} // console.log(ev);

dist/index.mjs

@@ -706,6 +706,11 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	function keydownHandler(ev) {
+		// prevent submitting if the number spinner is inside a form element
+		if (ev.key == "Enter") {
+			ev.preventDefault();
+		}
+
 		if (ev.target == dragElement || ev.target == editElement) {
 			dispatch("consoleLog", ev.type);
 		} // console.log(ev);

example/public/build/bundle.js

@@ -17,6 +17,7 @@
   let value9 = 100;
   let value10 = 12 * 60;
   let value11 = 1;
+  let value12 = 100;
   
   // Callback functions for example 9 ---------------------
   function addDollar(val) {
@@ -233,6 +234,21 @@
 
   <hr />
 
+  <div class="row">
+    <div class="explanation">
+      Hitting enter should not submit the form.<br />Current value is {value12}
+    </div>
+    <div class="right">
+      <form>
+        <div>
+          <NumberSpinner bind:value={value12} />    
+        </div>
+        <div>
+          <button on:click|preventDefault={() => alert('Form was submitted')}>Submit</button>
+        </div>
+      </form>
+    </div>
+  </div>
 
 </main>
 

example/public/build/bundle.js.map

@@ -30,7 +30,7 @@
     "src",
     "dist"
   ],
-  "version": "0.7.7",
+  "version": "0.7.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bohnacker/svelte-number-spinner.git"

example/src/App.svelte

@@ -180,6 +180,11 @@
   }
 
   function keydownHandler(ev) {
+    // prevent submitting if the number spinner is inside a form element
+    if (ev.key == "Enter") {
+      ev.preventDefault();
+    }
+
     if (ev.target == dragElement || ev.target == editElement) {
       dispatch("consoleLog", ev.type);
       // console.log(ev);