Added options for scrollIntoView

Resetform fix

Author: ciscoheat

CHANGELOG.md

@@ -5,12 +5,17 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.2.0]
 
 ### Added
 
+- The `scrollToError` option can now take the same parameters as [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView), which makes it work for nested scrollbars.
 - Added signature to more conveniently set a form-level error with `setError`.
 
+### Fixed
+
+- If the `resetForm` option was enabled, the form was reset even if `fail` was returned.
+
 ## [1.1.3] - 2023-06-29
 
 ### Fixed

src/lib/client/formEnhance.ts

@@ -231,7 +231,11 @@ export function formEnhance<T extends AnyZodObject, M>(
         : null;
 
       if (!isElementInViewport(el, nav?.offsetHeight ?? 0)) {
-        scrollToAndCenter(el, undefined, options.scrollToError);
+        if (typeof options.scrollToError == 'string') {
+          scrollToAndCenter(el, undefined, options.scrollToError);
+        } else {
+          el.scrollIntoView(options.scrollToError);
+        }
       }
 
       // Don't focus on the element if on mobile, it will open the keyboard
@@ -396,7 +400,9 @@ export function formEnhance<T extends AnyZodObject, M>(
 
         // Deprecation fix
         const submitData =
-          submit.formData ?? (submit as { data: FormData }).data;
+          'formData' in submit
+            ? submit.formData
+            : (submit as { data: FormData }).data;
 
         if (options.SPA) {
           cancel();

src/lib/client/index.ts

@@ -77,7 +77,7 @@ export type FormOptions<T extends ZodValidation<AnyZodObject>, M> = Partial<{
   applyAction: boolean;
   invalidateAll: boolean;
   resetForm: boolean | (() => boolean);
-  scrollToError: 'auto' | 'smooth' | 'off';
+  scrollToError: 'auto' | 'smooth' | 'off' | boolean | ScrollIntoViewOptions;
   autoFocusOnError: boolean | 'detect';
   errorSelector: string;
   selectErrorText: boolean;
@@ -375,9 +375,9 @@ export function superForm<
         if (duplicateId.has(form.id)) {
           console.warn(
             `Duplicate form id found: "${form.id}"` +
-              '. Multiple forms will receive the same data. Use the id option to differentiate between them, or if this is intended, set warnings.duplicateId option to false to disable this message.'
+              '. Multiple forms will receive the same data. Use the id option to differentiate between them, ' +
+              'or if this is intended, set warnings.duplicateId option to false to disable this message.'
           );
-          break;
         } else {
           duplicateId.add(form.id);
         }
@@ -483,6 +483,7 @@ export function superForm<
   ) {
     if (
       form.valid &&
+      untaint &&
       options.resetForm &&
       (options.resetForm === true || options.resetForm())
     ) {

src/routes/+page.server.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { error, fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { redirect } from 'sveltekit-flash-message/server';
-import { RateLimiter } from 'sveltekit-rate-limiter';
+import { RateLimiter } from 'sveltekit-rate-limiter/server';
 
 const limiter = new RateLimiter({
   rates: {
@@ -86,7 +86,7 @@ export const actions = {
     console.log('FORM', form);
     if (!form.valid) return fail(400, { form });
 
-    if (!(await limiter.check(event))) {
+    if (await limiter.isLimited(event)) {
       form.valid = false;
       form.message = { type: 'error', message: 'You are rate limited' };
       return fail(429, { form });

src/routes/Navigation.svelte

@@ -23,7 +23,8 @@
   <a href="/tests/superform-c">Side-effect 2</a> |
   <a href="/tests/multiselect">Multi-select</a> |
   <a href="/tests/spa-values-disappearing">SPA onUpdate</a> |
-  <a href="/posted">Posted store</a>
+  <a href="/posted">Posted store</a> |
+  <a href="/tests/flash-onerror">Flash onError</a>
 </nav>
 
 <style>