Filament•2y ago

TimePicker and DateTimePicker incorrect behaviour due to {{ $field::class }}.display-text

Hi everyone, I was making a complex form, that has the fields from another resource where it's created, and it's stored into an array (Json MYSQL field) into the database. Information just to put into context 1. In a resource I created the form fields using a repeater (image 1). That works fine. 2. When I'm using them into the second resource, I have a field that searches into the first one and get the form created, and linked into the array structure. That also works fine for all the other inputs except DateTimePicker and DatePicker. 3. If I activate field validation for date fields, the date fields will get always an error as it's required and not filled (image 3). 4. When I don't activate validation for date fields, it allows to store record but in the Date field, no data is returned (image 4). 5. When I checked into the mysql column that stores the error, I find nothing is filled into the date field (image 5). Assumptions 6. Then i was looking into field name, and it turns out that the field name is "tGSZNE2UQiltjESVRDWT.data.transform_forms.Prueba de formulario.Prueba de campo fecha.Filament\Forms\Components\DatePicker.display-text", thing that doesn't occur into the other fields, where the name is OK. 7. When I checked into DateTimePicker resource view, it looks that the state field that stores datetime has this expression {{ $field::class }}.display-text linked to it. I assume this is where the error is made I was thinking on temporary "hacking" it making a hidden field with the correct name, which is updated when I update the datefield is filled, but I guess this wouldn't be the expected behaviour. I just don't want to try to "fix" the field into filamentphp code, because I'm pretty sure I don't have enough knowledge to do it. (My bad, still making an effort to learn)

10 Replies

Dan Harrin•2y ago

the issue is not with the wire:key really the problem is that form field names (and any names like action names) should never contain spaces. Use Str::kebab() to generate a key from the label and use that you can pass in ->label() if you want but the name of the field still needs to not have a space

Alvaro LeonOP•2y ago

Ok, I replaced field names using

Str::kebab()

Str::kebab()

to store and retrieve. Also field names were stored like this:

"-prueba-de-formulario":{
"-prueba-de-campo-fecha":null,
"-prueba-de-campo-texto":"aseraserase",
"-prueba-de-campo-selector":"2"
}

"-prueba-de-formulario":{
"-prueba-de-campo-fecha":null,
"-prueba-de-campo-texto":"aseraserase",
"-prueba-de-campo-selector":"2"
}

Still not working for the dateField 🥺 Checking, it is also happening when I use toggle fields.

Dan Harrin•2y ago

i dont know how much i can help you with this its hard without understanding all the parts of what you're doing

Alvaro LeonOP•2y ago

Hi. Well. The thing I'm doing is a little bit complicated, but I can explain with an example: - I have a FormResource that allows the user to create and modify custom forms. In that resource, the user creates custom form fields, defining title, type (TextInput, Select, DatePicker, DateTimePicker and toggle), size (using 12 cols grid) and if it is required or not. - I have a second resource FormAnswersResource, that allows the user to enter the form answers. First, the user enters and using a Select, finds the corresponding form. Then the app fills a Card with the fields with that form using the data given in the first resource. - The user input the data, and press save to save the results of that form, which is stored into a column called "answers" into the database. The problem is that when the form has DatePicker, DateTimePicker and Toggle components, the data is not passed nor into the validation, nor into the corresponding JSON field, then data is gone somewhere. I'm trying to be as clear as my little english knowledge can allows me. But i'll try to find the answer, and actually i'm going to be this weekend checking what is happening in filament code.

Dan Harrin•2y ago

please send the code for the form which dynamically renders the fields based on the select

Alvaro LeonOP•2y ago

sure, there it is: https://gist.github.com/alvleont/bef5e2b1d7c286c06646d72960000315

Gist

Extract from WarehouseMovement Resource

Extract from WarehouseMovement Resource. GitHub Gist: instantly share code, notes, and snippets.

Dan Harrin•2y ago

wheres the select?

Alvaro LeonOP•2y ago

Sorry for the delay. I'll put the button here just for not to complicate everything (that particular resource has 1210 lines of code, I know, I'm refactoring).

 Select::make('transforming_instruction_id')->label('Instrucción de Transformación')->columnSpan(6)
                            ->options(function ($get) {
                                return TransformInstruction::all()->pluck('name', 'id');
                            })
                            ->visible(function ($get) {
                                if ($movementType = MovementType::find($get('movement_type_id')) and  ($movementType->type == 'transform')) {
                                    return true;
                                }

                                return false;
                            })->reactive()->searchable()

 Select::make('transforming_instruction_id')->label('Instrucción de Transformación')->columnSpan(6)
                            ->options(function ($get) {
                                return TransformInstruction::all()->pluck('name', 'id');
                            })
                            ->visible(function ($get) {
                                if ($movementType = MovementType::find($get('movement_type_id')) and  ($movementType->type == 'transform')) {
                                    return true;
                                }

                                return false;
                            })->reactive()->searchable()

Dan Harrin•2y ago

the problems your experiencing are because the underlying livewire properties associated with each field dont exist when you change the select you essentially need to use afterStateUpdated(fn ($set, $state) => ...) to $set the every dynamic form field to null so that we know the livewire property exists properly

Alvaro LeonOP•2y ago

Thanks for the answer. It worked.

Gaming

Programming

TimePicker and DateTimePicker incorrect behaviour due to {{ $field::class }}.display-text