Fix linked autocomplete in list

Author: aguingand

demo/app/Sharp/TestForm/TestForm.php

@@ -64,7 +64,10 @@ public function buildFormFields(FieldsContainer $formFields): void
                     ->setListItemTemplate('{{ $name }}')
                     ->setResultItemTemplate('{{ $name }} ({{ $id }})')
 //                    ->setReadOnly()
-                    ->setRemoteEndpoint(route('sharp.autocompletes.users.index')),
+                    ->setRemoteEndpoint(route('sharp.autocompletes.users.index'))
+                // ->setRemoteCallback(function ($search, $data) {
+                //     dd($data);
+                // }, linkedFields: ['select_dropdown']),
             )
             ->addField(
                 SharpFormAutocompleteListField::make('autocomplete_list')
@@ -144,6 +147,28 @@ public function buildFormFields(FieldsContainer $formFields): void
                     ->addItemField(
                         SharpFormCheckField::make('check', 'check this'),
                     )
+//                     ->addItemField(
+//                         SharpFormSelectField::make('select_dropdown', $this->options())
+//                             ->setLabel('Select dropdown')
+//                             ->allowSelectAll()
+//
+// //                    ->setClearable()
+// //                    ->setReadOnly()
+//                             ->setMultiple()
+//                             ->setDisplayAsDropdown(),
+//                     )
+//                     ->addItemField(
+//                         SharpFormAutocompleteRemoteField::make('autocomplete_remote')
+//                             ->setLabel('Autocomplete remote')
+//                             ->setRemoteSearchAttribute('query')
+//                             ->setListItemTemplate('{{ $name }}')
+//                             ->setResultItemTemplate('{{ $name }} ({{ $id }})')
+//
+// //                    ->setReadOnly()
+//                             ->setRemoteCallback(function ($search, $data) {
+//                                 dd($data);
+//                             }, linkedFields: ['select_dropdown']),
+//                     )
                     ->addItemField(SharpFormEditorField::make('markdown2')
                         ->setLocalized()
                         ->setLabel('Markdown')
@@ -333,6 +358,7 @@ public function buildFormLayout(FormLayout $formLayout): void
                     ->addColumn(6, function (FormLayoutColumn $column) {
                         $column->withListField('list', function (FormLayoutColumn $listItem) {
                             $listItem->withFields('date|5', 'check|7')
+                                // ->withFields('select_dropdown', 'autocomplete_remote')
                                 ->withField('markdown2');
                         });
                     });

resources/js/components/ui/command/CommandEmpty.vue

@@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 px-4 text-center text-sm', props.class)">
     <slot />
   </ComboboxEmpty>
 </template>

resources/js/form/components/Form.vue

@@ -226,6 +226,7 @@
                                                                                                 :field-error-key="fieldLayout.key"
                                                                                                 :value="form.data[fieldLayout.key]"
                                                                                                 :locale="(form.getMeta(fieldLayout.key) as FieldMeta)?.locale ?? form.defaultLocale"
+                                                                                                :parent-data="form.data"
                                                                                                 :row="row"
                                                                                                 root
                                                                                                 @input="(value, options) => onFieldInput(fieldLayout.key, value, options)"
@@ -251,6 +252,7 @@
                                                                 :value="form.data[fieldLayout.key]"
                                                                 :locale="(form.getMeta(fieldLayout.key) as FieldMeta)?.locale ?? form.currentLocale"
                                                                 :row="row as LayoutFieldData[]"
+                                                                :parent-data="form.data"
                                                                 root
                                                                 @input="(value, options) => onFieldInput(fieldLayout.key, value, options)"
                                                                 @locale-change="onFieldLocaleChange(fieldLayout.key, $event)"

resources/js/form/components/fields/Autocomplete.vue

@@ -79,7 +79,7 @@
                         }), {
                             formData: field.callbackLinkedFields
                                 ? Object.fromEntries(
-                                    Object.entries(form.serializedData).filter(([fieldKey]) => field.callbackLinkedFields.includes(fieldKey))
+                                    Object.entries(props.parentData).filter(([fieldKey]) => field.callbackLinkedFields.includes(fieldKey))
                                 )
                                 : null,
                         }, {
@@ -199,12 +199,12 @@
                     />
                     <CommandList>
                         <template v-if="loading">
-                            <div class="py-6 text-center text-sm">
+                            <div class="py-6 px-4 text-center text-sm">
                                 {{ __('sharp::form.autocomplete.loading') }}
                             </div>
                         </template>
                         <template v-else-if="!results?.length && props.field.mode === 'remote' && searchTerm.length < props.field.searchMinChars">
-                            <div class="py-6 text-center text-sm">
+                            <div class="py-6 px-4 text-center text-sm">
                                 {{ trans_choice('sharp::form.autocomplete.query_too_short', props.field.searchMinChars, { min_chars: props.field.searchMinChars }) }}
                             </div>
                         </template>

resources/js/form/components/fields/List.vue

@@ -220,6 +220,7 @@
                                                             :parent-field="field"
                                                             :value="item[itemFieldLayout.key]"
                                                             :locale="(form.getMeta(`${field.key}.${item[itemKey]}.${itemFieldLayout.key}`) as FieldMeta)?.locale ?? form.defaultLocale"
+                                                            :parent-data="item"
                                                             :row="row"
                                                             @input="(value, options) => onFieldInput(index, itemFieldLayout.key, value, options)"
                                                             @locale-change="onFieldLocaleChange(`${field.key}.${item[itemKey]}.${itemFieldLayout.key}`, $event)"

resources/js/form/types.ts

@@ -26,6 +26,7 @@ export type FormFieldProps<Data extends FormFieldData = FormFieldData, Value = D
     parentField?: FormListFieldData
     fieldLayout?: LayoutFieldData,
     fieldErrorKey?: string,
+    parentData?: FormFieldData | FormListFieldData['value'][number],
     hasError?: boolean,
     value?: Value,
     locale?: string | null,