Fix array keys misalignment in form data and query (#2690)

skryukov · pascalbaljet · web-flow · commit 09d68fc190d4 · 2025-11-13T15:39:51.000+01:00
* Fix array keys misalignment in form data and query

* Refactor

* Pass queryStringArrayFormat .submit()

* Improve test

---------

Co-authored-by: Pascal Baljet &lt;pascal@pascalbaljet.nl&gt;
diff --git a/packages/core/src/formData.ts b/packages/core/src/formData.ts
@@ -1,30 +1,37 @@
-import { FormDataConvertible } from './types'
+import type { FormDataConvertible, QueryStringArrayFormatOption } from './types'
 
 export const isFormData = (value: any): value is FormData => value instanceof FormData
 
 export function objectToFormData(
   source: Record<string, FormDataConvertible>,
   form: FormData = new FormData(),
   parentKey: string | null = null,
+  queryStringArrayFormat: QueryStringArrayFormatOption = 'brackets',
 ): FormData {
   source = source || {}
 
   for (const key in source) {
     if (Object.prototype.hasOwnProperty.call(source, key)) {
-      append(form, composeKey(parentKey, key), source[key])
+      append(form, composeKey(parentKey, key, 'indices'), source[key], queryStringArrayFormat)
     }
   }
 
   return form
 }
 
-function composeKey(parent: string | null, key: string): string {
-  return parent ? parent + '[' + key + ']' : key
+function composeKey(parent: string | null, key: string, format: QueryStringArrayFormatOption): string {
+  if (!parent) {
+    return key
+  }
+
+  return format === 'brackets' ? `${parent}[]` : `${parent}[${key}]`
 }
 
-function append(form: FormData, key: string, value: FormDataConvertible): void {
+function append(form: FormData, key: string, value: FormDataConvertible, format: QueryStringArrayFormatOption): void {
   if (Array.isArray(value)) {
-    return Array.from(value.keys()).forEach((index) => append(form, composeKey(key, index.toString()), value[index]))
+    return Array.from(value.keys()).forEach((index) =>
+      append(form, composeKey(key, index.toString(), format), value[index], format),
+    )
   } else if (value instanceof Date) {
     return form.append(key, value.toISOString())
   } else if (value instanceof File) {
@@ -41,5 +48,5 @@ function append(form: FormData, key: string, value: FormDataConvertible): void {
     return form.append(key, '')
   }
 
-  objectToFormData(value, form, key)
+  objectToFormData(value, form, key, format)
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -208,6 +208,8 @@ export type PageHandler<ComponentType = Component> = ({
 
 export type PreserveStateOption = boolean | 'errors' | ((page: Page) => boolean)
 
+export type QueryStringArrayFormatOption = 'indices' | 'brackets'
+
 export type Progress = AxiosProgressEvent
 
 export type LocationVisit = {
@@ -231,7 +233,7 @@ export type Visit<T extends RequestPayload = RequestPayload> = {
   headers: Record<string, string>
   errorBag: string | null
   forceFormData: boolean
-  queryStringArrayFormat: 'indices' | 'brackets'
+  queryStringArrayFormat: QueryStringArrayFormatOption
   async: boolean
   showProgress: boolean
   prefetch: boolean
diff --git a/packages/core/src/url.ts b/packages/core/src/url.ts
@@ -1,7 +1,14 @@
 import * as qs from 'qs'
 import { hasFiles } from './files'
 import { isFormData, objectToFormData } from './formData'
-import { FormDataConvertible, Method, RequestPayload, UrlMethodPair, VisitOptions } from './types'
+import type {
+  FormDataConvertible,
+  Method,
+  QueryStringArrayFormatOption,
+  RequestPayload,
+  UrlMethodPair,
+  VisitOptions,
+} from './types'
 
 export function hrefToUrl(href: string | URL): URL {
   return new URL(href.toString(), typeof window === 'undefined' ? undefined : window.location.toString())
@@ -17,7 +24,7 @@ export const transformUrlAndData = (
   let url = typeof href === 'string' ? hrefToUrl(href) : href
 
   if ((hasFiles(data) || forceFormData) && !isFormData(data)) {
-    data = objectToFormData(data)
+    data = objectToFormData(data, new FormData(), null, queryStringArrayFormat)
   }
 
   if (isFormData(data)) {
@@ -36,7 +43,7 @@ export function mergeDataIntoQueryString<T extends RequestPayload>(
   method: Method,
   href: URL | string,
   data: T,
-  qsArrayFormat: 'indices' | 'brackets' = 'brackets',
+  qsArrayFormat: QueryStringArrayFormatOption = 'brackets',
 ): [string, MergeDataIntoQueryStringDataReturnType<T>] {
   const hasDataForQueryString = method === 'get' && !isFormData(data) && Object.keys(data).length > 0
   const hasHost = urlHasProtocol(href.toString())
diff --git a/packages/react/src/Form.ts b/packages/react/src/Form.ts
@@ -134,6 +134,7 @@ const Form = forwardRef<FormComponentRef, ComponentProps>(
 
       const submitOptions: FormSubmitOptions = {
         headers,
+        queryStringArrayFormat,
         errorBag,
         showProgress,
         invalidateCacheTags,
diff --git a/packages/react/test-app/Pages/FormComponent/Elements.tsx b/packages/react/test-app/Pages/FormComponent/Elements.tsx
@@ -1,8 +1,9 @@
+import { QueryStringArrayFormatOption } from '@inertiajs/core'
 import { Form } from '@inertiajs/react'
 
-export default () => {
+export default ({ queryStringArrayFormat }: { queryStringArrayFormat: QueryStringArrayFormatOption }) => {
   return (
-    <Form action="/dump/post" method="post">
+    <Form action="/dump/post" method="post" queryStringArrayFormat={queryStringArrayFormat}>
       {({ isDirty }) => (
         <>
           <h1>Form Elements</h1>
diff --git a/packages/react/test-app/Pages/FormComponent/Options.tsx b/packages/react/test-app/Pages/FormComponent/Options.tsx
@@ -1,4 +1,4 @@
-import type { Method } from '@inertiajs/core'
+import type { Method, QueryStringArrayFormatOption } from '@inertiajs/core'
 import { Form } from '@inertiajs/react'
 import { useMemo, useState } from 'react'
 import Article from './../Article'
@@ -12,7 +12,9 @@ export default () => {
   const [preserveScroll, setPreserveScroll] = useState(false)
   const [preserveState, setPreserveState] = useState(false)
   const [preserveUrl, setPreserveUrl] = useState(false)
-  const [queryStringArrayFormat, setQueryStringArrayFormat] = useState<'indices' | 'brackets' | undefined>(undefined)
+  const [queryStringArrayFormat, setQueryStringArrayFormat] = useState<QueryStringArrayFormatOption | undefined>(
+    undefined,
+  )
 
   function setOnly() {
     setOnlyValues(['users'])
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
@@ -81,6 +81,7 @@
 
     const submitOptions: FormSubmitOptions = {
       headers,
+      queryStringArrayFormat,
       errorBag,
       showProgress,
       invalidateCacheTags,
diff --git a/packages/svelte/test-app/Pages/FormComponent/Elements.svelte b/packages/svelte/test-app/Pages/FormComponent/Elements.svelte
@@ -1,8 +1,11 @@
-<script>
+<script lang="ts">
   import { Form } from '@inertiajs/svelte'
+  import type { QueryStringArrayFormatOption } from '@inertiajs/core'
+
+  export let queryStringArrayFormat: QueryStringArrayFormatOption
 </script>
 
-<Form action="/dump/post" method="post" let:isDirty>
+<Form action="/dump/post" method="post" let:isDirty {queryStringArrayFormat}>
   <h1>Form Elements</h1>
 
   <div>
diff --git a/packages/svelte/test-app/Pages/FormComponent/Options.svelte b/packages/svelte/test-app/Pages/FormComponent/Options.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Form } from '@inertiajs/svelte'
-  import type { Method } from '@inertiajs/core'
+  import type { Method, QueryStringArrayFormatOption } from '@inertiajs/core'
   import Article from '../Article.svelte'
 
   let only: string[] = []
@@ -11,7 +11,7 @@
   let preserveScroll = false
   let preserveState = false
   let preserveUrl = false
-  let queryStringArrayFormat: 'indices' | 'brackets' | undefined = undefined
+  let queryStringArrayFormat: QueryStringArrayFormatOption | undefined = undefined
 
   function setOnly() {
     only = ['users']
diff --git a/packages/vue3/src/form.ts b/packages/vue3/src/form.ts
@@ -171,6 +171,7 @@ const Form = defineComponent({
 
       const submitOptions: FormSubmitOptions = {
         headers: props.headers,
+        queryStringArrayFormat: props.queryStringArrayFormat,
         errorBag: props.errorBag,
         showProgress: props.showProgress,
         invalidateCacheTags: props.invalidateCacheTags,
diff --git a/packages/vue3/test-app/Pages/FormComponent/Elements.vue b/packages/vue3/test-app/Pages/FormComponent/Elements.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import { QueryStringArrayFormatOption } from '@inertiajs/core'
 import { Form } from '@inertiajs/vue3'
+
+defineProps<{
+  queryStringArrayFormat: QueryStringArrayFormatOption
+}>()
 </script>
 
 <template>
-  <Form action="/dump/post" method="post" v-slot="{ isDirty }">
+  <Form action="/dump/post" method="post" v-slot="{ isDirty }" :queryStringArrayFormat>
     <h1>Form Elements</h1>
     <div>Form is <span v-if="isDirty">dirty</span><span v-else>clean</span></div>
 
diff --git a/packages/vue3/test-app/Pages/FormComponent/Options.vue b/packages/vue3/test-app/Pages/FormComponent/Options.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Method } from '@inertiajs/core'
+import type { Method, QueryStringArrayFormatOption } from '@inertiajs/core'
 import { Form } from '@inertiajs/vue3'
 import { computed, ref } from 'vue'
 import Article from './../Article.vue'
@@ -12,7 +12,7 @@ const state = ref('Default State')
 const preserveScroll = ref(false)
 const preserveState = ref(false)
 const preserveUrl = ref(false)
-const queryStringArrayFormat = ref<'indices' | 'brackets' | undefined>(undefined)
+const queryStringArrayFormat = ref<QueryStringArrayFormatOption | undefined>(undefined)
 
 function setOnly() {
   only.value = ['users']
diff --git a/tests/app/server.js b/tests/app/server.js
@@ -840,7 +840,14 @@ app.patch('/form-component/default-value', (req, res) => {
   return res.redirect(303, '/')
 })
 
-app.get('/form-component/elements', (req, res) => inertia.render(req, res, { component: 'FormComponent/Elements' }))
+app.get('/form-component/elements', (req, res) =>
+  inertia.render(req, res, {
+    component: 'FormComponent/Elements',
+    props: {
+      queryStringArrayFormat: req.query.queryStringArrayFormat || 'brackets',
+    },
+  }),
+)
 app.get('/form-component/errors', (req, res) => inertia.render(req, res, { component: 'FormComponent/Errors' }))
 app.post('/form-component/errors', (req, res) =>
   inertia.render(req, res, {
diff --git a/tests/core/url.test.ts b/tests/core/url.test.ts
@@ -1,5 +1,5 @@
 import test, { expect } from '@playwright/test'
-import { mergeDataIntoQueryString } from '../../packages/core/src/url'
+import { mergeDataIntoQueryString, transformUrlAndData } from '../../packages/core/src/url'
 
 test.describe('url.ts', () => {
   test.describe('mergeDataIntoQueryString', () => {
@@ -256,4 +256,124 @@ test.describe('url.ts', () => {
       })
     })
   })
+
+  test.describe('transformUrlAndData', () => {
+    test('accepts string URL as href parameter', () => {
+      const inputUrl = 'https://example.com/page'
+      const [url, data] = transformUrlAndData(inputUrl, { foo: 'bar' }, 'post', false, 'brackets')
+
+      expect(url).toBeInstanceOf(URL)
+      expect(url.href).toBe('https://example.com/page')
+    })
+
+    test('converts data to FormData when it contains files', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+      const [url, data] = transformUrlAndData('https://example.com/upload', { file }, 'post', false, 'brackets')
+
+      expect(data).toBeInstanceOf(FormData)
+      expect((data as FormData).get('file')).toEqual(file)
+    })
+
+    test('converts data to FormData when forceFormData is true', () => {
+      const [url, data] = transformUrlAndData('https://example.com/submit', { name: 'test' }, 'post', true, 'brackets')
+
+      expect(data).toBeInstanceOf(FormData)
+      expect((data as FormData).get('name')).toBe('test')
+    })
+
+    test('returns FormData unchanged when data is already FormData', () => {
+      const formData = new FormData()
+      formData.append('key', 'value')
+      const [url, data] = transformUrlAndData('https://example.com/submit', formData, 'post', false, 'brackets')
+
+      expect(data).toBe(formData)
+      expect(data).toBeInstanceOf(FormData)
+    })
+
+    test('does not convert to FormData when forceFormData is false and no files present', () => {
+      const [url, data] = transformUrlAndData('https://example.com/submit', { name: 'test' }, 'post', false, 'brackets')
+
+      expect(data).not.toBeInstanceOf(FormData)
+      expect(data).toEqual({ name: 'test' })
+    })
+
+    test('uses bracket notation when converting arrays to FormData by default', () => {
+      const [url, data] = transformUrlAndData(
+        'https://example.com/submit',
+        { tags: ['a', 'b'] },
+        'post',
+        true,
+        'brackets',
+      )
+
+      expect(data).toBeInstanceOf(FormData)
+      expect((data as FormData).getAll('tags[]')).toEqual(['a', 'b'])
+    })
+
+    test('uses index notation when converting arrays to FormData with indices format', () => {
+      const [url, data] = transformUrlAndData(
+        'https://example.com/submit',
+        { tags: ['a', 'b'] },
+        'post',
+        true,
+        'indices',
+      )
+
+      expect(data).toBeInstanceOf(FormData)
+      expect((data as FormData).get('tags[0]')).toBe('a')
+      expect((data as FormData).get('tags[1]')).toBe('b')
+    })
+
+    test('handles nested objects when forceFormData is true', () => {
+      const [url, data] = transformUrlAndData(
+        'https://example.com/submit',
+        { user: { name: 'John', age: 30 } },
+        'post',
+        true,
+        'brackets',
+      )
+
+      expect(data).toBeInstanceOf(FormData)
+      expect((data as FormData).get('user[name]')).toBe('John')
+      expect((data as FormData).get('user[age]')).toBe('30')
+    })
+
+    test('returns FormData with file and does not merge into query string', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' })
+      const [url, data] = transformUrlAndData(
+        'https://example.com/upload',
+        { file, name: 'test' },
+        'get',
+        false,
+        'brackets',
+      )
+
+      expect(data).toBeInstanceOf(FormData)
+      expect(url.search).toBe('')
+      expect((data as FormData).get('file')).toEqual(file)
+      expect((data as FormData).get('name')).toBe('test')
+    })
+
+    test('handles absolute URLs with protocol', () => {
+      const [url, data] = transformUrlAndData('https://example.com/page', { foo: 'bar' }, 'post', false, 'brackets')
+
+      expect(url.protocol).toBe('https:')
+      expect(url.host).toBe('example.com')
+      expect(url.pathname).toBe('/page')
+    })
+
+    test('preserves existing query parameters and hash when returning FormData', () => {
+      const [url, data] = transformUrlAndData(
+        'https://example.com/page?existing=value#section',
+        { name: 'test' },
+        'post',
+        true,
+        'brackets',
+      )
+
+      expect(url.search).toBe('?existing=value')
+      expect(url.hash).toBe('#section')
+      expect(data).toBeInstanceOf(FormData)
+    })
+  })
 })
diff --git a/tests/form-component.spec.ts b/tests/form-component.spec.ts
