Filament•15mo ago

Address autocomplete custom field does not update relationship

Hi, I've created a custom field to implement an address autocomplete field with a custom API to call. This field is used in a relation manager based on a "location" relationship. This relationship contains multiple field like "address, city, latitude...". My custom field should be able to fill the relationship with values retrieved from the API. I can retrieve the different values in my parent form but I don't know how to map them to the field of the location relationship. Can you help me with that ? Here's a gist containing the relation manager and the blade component. The PHP class for the field is nearly empty (except the view property) : https://gist.github.com/Pierrad/298ea2056714dfc0c55759406406d9b9 PS: I'm new to Laravel, Livewire and Filament development, so if there is a better way to do things, please tell me. Thanks

Gist

Autocomplete Custom Filament Field

Autocomplete Custom Filament Field. GitHub Gist: instantly share code, notes, and snippets.

Solution:

Okay I manage to get it work with your recommandations ($wire.set & using only reactive()), here's the gist if someone needs it one day : https://gist.github.com/Pierrad/298ea2056714dfc0c55759406406d9b9

Jump to solution

9 Replies

DrByte•15mo ago

Are you getting any JS console errors? It seems your $form is trying to $set() into fields that aren't present in your form. It might be useful to know what JS errors are getting triggered, if any.

PierradOP•15mo ago

When I'm typing into the field, I'm getting this error in the console :

Uncaught TypeError: inputTypes.contains is not a function
    at isTextElement (<anonymous>:14:31)
    at <anonymous>:31:26
    at <anonymous>:66:3

Uncaught TypeError: inputTypes.contains is not a function
    at isTextElement (<anonymous>:14:31)
    at <anonymous>:31:26
    at <anonymous>:66:3

It seems to be from this function :

    function isTextElement(element) {
        const tagName = element.tagName.toLowerCase();
        if (tagName === 'textarea') {
            return true;
        }
        if (tagName !== 'input') {
            return false;
        }
        const type = element.getAttribute('type');
        if (type) {
            // if any of these input types is not supported by a browser, it will behave as input type text.
            const inputTypes = ['text', 'password', 'number', 'email', 'tel', 'url', 'search', 'date', 'datetime', 'datetime-local', 'time', 'month', 'week'];
            return inputTypes.contains(type.toLowerCase());
        }
        return false;
    }

    function isTextElement(element) {
        const tagName = element.tagName.toLowerCase();
        if (tagName === 'textarea') {
            return true;
        }
        if (tagName !== 'input') {
            return false;
        }
        const type = element.getAttribute('type');
        if (type) {
            // if any of these input types is not supported by a browser, it will behave as input type text.
            const inputTypes = ['text', 'password', 'number', 'email', 'tel', 'url', 'search', 'date', 'datetime', 'datetime-local', 'time', 'month', 'week'];
            return inputTypes.contains(type.toLowerCase());
        }
        return false;
    }

But even if I set my field using "location.address", "location.city"... it's not working. Also I tried with a simple Text field to update another field using $set() with the simple name "address" for example and it's working, so I don't understand why my custom field does not seem to be able to update other field using their names. Any help?

cheesegrits•15mo ago

Is your afterStateUpdated() even running? Like, if you stick a dd($state) in there, does it break?

cheesegrits•15mo ago

I don't know how useful this will be, but I do similar stuff in my Google Maps package, in the Geocomplete field, which calls the Google Maps reverse geocode API, then fills out the component parts (city, state, zip, etc) on the form. But I use $wire.set() directly to update the component fields from their state paths. https://github.com/cheesegrits/filament-google-maps/blob/main/resources/js/filament-google-geocomplete.js

GitHub

filament-google-maps/resources/js/filament-google-geocomplete.js at...

Google Maps package for Filament PHP. Contribute to cheesegrits/filament-google-maps development by creating an account on GitHub.

awcodes•15mo ago

One thing, that may or may not be an issue. You are calling both reactive() and live() on your field in the form. Remove one of them. It could potentially be creating a double call that is clearing the state. The code you provided looks ok other than that. And the error you reported looks like it’s either coming from alpine or livewire, so hard to tell.

PierradOP•15mo ago

It breaks but only when I save the form, not when I update the field. I'll check that, thanks Okay, I'll fix that, thanks

Solution

Pierrad•15mo ago

PierradOP•15mo ago

Thanks for your help

Konsta•13mo ago

Hey, I ran into same issue - the problem seems to be in this line of code

return inputTypes.contains(type.toLowerCase());

return inputTypes.contains(type.toLowerCase());

It is trying to use .contains method on an array, which does not exist in JS. I am trying to find out which dependency has this error - I am thinking about

├── [email protected]
├── [email protected]

├── [email protected]
├── [email protected]

What dependencies did you have in your code?

Gaming

Programming

Address autocomplete custom field does not update relationship