I'm currently facing an issue with dynamic dependency in Laravel Nova, specifically related to the usage of a custom AutocompleteField. Let me explain in more detail.
In my resource, I have two fields: a standard "customer" field that contains customer information such as name, email, address, etc., and a custom AutocompleteField. The goal is to automatically populate the AutocompleteField with the value of the customer's address.
public function fields(NovaRequest $request)
{
return [
ID::make()->sortable(),
BelongsTo::make('Order')->nullable(),
BelongsTo::make('customer')->nullable(),
AutocompleteField::make('route')->dependsOn(['customer'], function (AutocompleteField $field, NovaRequest $request, FormData $formData) {
$customerid = (int) $formData->resource(Customer::uriKey(), $formData->customer);
$customer = \App\Models\Customer::find($customerid);
if ($customer) {
//for example i try with customer name
$customerName = $customer->name;
$field->value = $customerName;
} else {
$field->value = null; // or any default value
}
}),
Textarea::make('Commentaire', 'comment')
->hideFromIndex(),
];
}
The problem I'm facing is that this logic doesn't seem to work with the custom AutocompleteField. However, if I replace it with a standard text field, everything works correctly.
I have properly defined my field as dependent following the documentation:
class AutocompleteField extends Field
{
use SupportsDependentFields;
/**
* The field's component.
*
* @var string
*/
public $component = 'autocomplete-field';
}
<template>
<DefaultField
:field="currentField"
:errors="errors"
:show-help-text="showHelpText"
:full-width-content="fullWidthContent"
>
<template #field>
<input
v-bind="extraAttributes"
@input="handleChange"
:value="value"
:dusk="field.attribute"
:disabled="currentlyIsReadonly"
:maxlength="field.enforceMaxlength ? field.maxlength : -1"
:id="currentField.uniqueKey"
type="text"
class="w-full form-control form-input form-input-bordered"
:class="errorClasses"
:placeholder="currentField.placeholder"
ref="autocompleteInput"
/>
</template>
</DefaultField>
</template>
<script>
import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
export default {
mixins: [DependentFormField, HandlesValidationErrors],
props: ['resourceName', 'resourceId', 'field'],
data() {
return {
autocomplete: null,
};
},
mounted() {
// Load the Google Places Autocomplete API script only if it's not already loaded
if (!window.google || !window.google.maps) {
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places`;
script.async = true;
document.head.appendChild(script);
script.onload = () => {
this.initAutocomplete();
};
} else {
this.initAutocomplete();
}
},
methods: {
/*
* Set the initial, internal value for the field.
*/
setInitialValue() {
this.value = this.currentField || '';
},
/**
* Initialize the Google Places Autocomplete
*/
initAutocomplete() {
this.autocomplete = new google.maps.places.Autocomplete(this.$refs.autocompleteInput, {
types: ['geocode'], // You can customize the types based on your requirements
});
this.autocomplete.addListener('place_changed', this.onPlaceChanged);
},
/**
* Event handler for when a place is selected from the Autocomplete dropdown
*/
onPlaceChanged() {
const place = this.autocomplete.getPlace();
if (place && place.formatted_address) {
this.value = place.formatted_address;
}
},
/**
* Fill the given FormData object with the field's internal value.
*/
fill(formData) {
formData.append(this.currentField.attribute, this.value || '');
},
},
};
</script>
Would you have any suggestions or solutions for this specific issue with the custom AutocompleteField? Any help would be greatly appreciated.
Thank you in advance!
Having an issue with dynamic dependency for the custom field in Laravel Nova. I've found limited information on the topic, but when I tried it with a basic text field, the code works. So, the problem seems to be with AutocompleteField, but I'm having trouble understanding what's going wrong.