Add reloadDocument prop to Form component #31

fabian-hiller · Mar 23, 2023 · 4cd9a7d · 4cd9a7d
1 parent d8b17f9
commit 4cd9a7d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/qwik/CHANGELOG.md b/packages/qwik/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to the library will be documented in this file.
 
+## vX.X.X (Month DD, YYYY)
+
+- Add `reloadDocument` prop to `Form` component (issue #31)
+
 ## v0.2.0 (March 23, 2023)
 
 - Change return type of first argument of `formAction$`

diff --git a/packages/qwik/src/components/Form.tsx b/packages/qwik/src/components/Form.tsx
@@ -31,6 +31,7 @@ export type FormProps<
   shouldTouched?: boolean;
   shouldDirty?: boolean;
   shouldFocus?: boolean;
+  reloadDocument?: boolean;
 
   // HTML props
   id?: string;
@@ -57,6 +58,7 @@ export function Form<
   shouldTouched,
   shouldDirty,
   shouldFocus,
+  reloadDocument,
   children,
   ...formProps
 }: FormProps<TFieldValues, TFieldName, TFieldArrayName>): JSX.Element {
@@ -71,7 +73,7 @@ export function Form<
       {...formProps}
       method="post"
       action={action?.actionPath}
-      preventdefault:submit
+      preventdefault:submit={!reloadDocument}
       noValidate
       ref={(element: Element) => {
         form.element = element as HTMLFormElement;
@@ -95,11 +97,13 @@ export function Form<
 
             // Run submit actions of form
             const [actionResult] = await Promise.all([
-              action?.submit(
-                encType === 'multipart/form-data'
-                  ? new FormData(element)
-                  : values
-              ),
+              !reloadDocument
+                ? action?.submit(
+                    encType === 'multipart/form-data'
+                      ? new FormData(element)
+                      : values
+                  )
+                : undefined,
               // TODO: Remove comment below once we have a better solution for
               // our `SubmitHandler` type
               // eslint-disable-next-line qwik/valid-lexical-scope

diff --git a/website/src/routes/(layout)/api/Form.mdx b/website/src/routes/(layout)/api/Form.mdx
@@ -40,6 +40,7 @@ Form element that takes care of validation and simplifies submission.
   shouldTouched={…}
   shouldDirty={…}
   shouldFocus={…}
+  reloadDocument={…}
 >
   children
 </Form>
@@ -71,6 +72,7 @@ Form element that takes care of validation and simplifies submission.
 - `shouldTouched` <Property {...properties.shouldTouched} />
 - `shouldDirty` <Property {...properties.shouldDirty} />
 - `shouldFocus` <Property {...properties.shouldFocus} />
+- `reloadDocument` <Property {...properties.reloadDocument} />
 - `children` <Property {...properties.children} />
 
 </Qwik>
@@ -89,6 +91,12 @@ By default, the values of fields that are not touched and not dirty are also pro
 
 `shouldActive`, `shouldTouched` and `shouldDirty` act like a kind of filter for the `values` parameter of the <Solid>`onSubmit`</Solid><Qwik>`onSubmit$`</Qwik> function and can be combined with each other.
 
+<Qwik block>
+
+If JavaScript is available, we prevent the page from being reloaded and send the data to the server via JavaScript. To change this, you can set `reloadDocument` to `true`.
+
+</Qwik>
+
 export const properties = {
   keepResponse: {
     type: 'boolean',
@@ -110,6 +118,10 @@ export const properties = {
     type: 'boolean',
     defaultValue: { type: 'boolean', value: true },
   },
+  reloadDocument: {
+    type: 'boolean',
+    defaultValue: { type: 'boolean', value: false },
+  },
   children: {
     type: { type: 'custom', name: 'JSX.Element' },
   },