dependsOn has no effect when the parent field is inside flexible

[fenestron]

Code example:

Text::make('Recipient')
    ->readonly()
    ->dependsOn(
        ['type'],
        function (Text $field, NovaRequest $request, FormData $formData) {
            if ($formData->type === 'gift') {
                $field->readonly(false)->rules(['required', 'email']);
            }
        }
    ),

Flexible::make('Content')
    ->addLayout('Simple content section', 'wysiwyg', [
        Text::make('Recipient')
            ->readonly()
            ->dependsOn(
                ['type'],
                function (Text $field, NovaRequest $request, FormData $formData) {
                    if ($formData->type === 'gift') {
                        $field->readonly(false)->rules(['required', 'email']);
                    }
                }
            ),

        Select::make('Purchase Type', 'type')
            ->options([
                'personal' => 'Personal',
                'gift' => 'Gift',
            ])
            ->default('personal'),
    ]),

Field behavior:

P.S. Example taken from documentation

[voidgraphics]

Thanks for the report!

[fenestron]

Related #338

[stepanenko3]

@voidgraphics The Slug field does not work by analogy

[ianrobertsFF]

To be fair the slug field never worked even under Nova 3. I had to Make my own slug field that checked if it had a Flexible Content key prefix to its id and then apply that prefix to the field it was checking.

Biggest issue really is that the temporary keys and new layouts are generated wholly in javascript, and not from an AJAX call to the layout in php. If it were the latter you could account for all of this in your layout and never have to touch Nova's Vue files.

[voidgraphics]

@ianrobertsFF Interesting idea, do you think you'd be up to submit a PR for something like this?

[ianrobertsFF]

I could, but I'm not really a developer, more developer adjacent infra background working on a personal project. I have a Nova 4 License so ill spin up a test site and take a look over this long weekend and see if I can pull something together.

If anyone else would rather take a stab at it your code is probably going to be better than mine!

[voidgraphics]

@ianrobertsFF up to you! I can't guarantee we would actually merge it, but I'm definitely interested in how that approach would work to actually solve the problem. You can also just submit your thought process in the discussions if you'd rather not spend a lot of time on the code itself.

[ianrobertsFF]

It might actually be simpler than that.

In Nova 4 formFields have a prop of formUniqueId

This is checked when registering for events:

getFieldAttributeChangeEventName(attribute) {
      return this.hasFormUniqueId === true
        ? `${this.formUniqueId}-${attribute}-change`
        : `${attribute}-change`
    },

It might be as simple as passing group.key as :form-unique-id in the component in FormGroup.vue

Don't have my test install set up yet. But will test this first.

[ianrobertsFF]

Turns out it's much more complicated than just setting that attribute, Nova does some ajax requests too.

I have a commit on my fork (https://github.com/ianrobertsFF/nova-flexible-content/commit/60d5cea4f56dfabff50fa765af5ea765bdf39886) that seems to be mostly working, but its very hacky. Particularly the required trait to flatten the field list from the resource. There are probably better ways of achieving that but I am relatively new to Laravel, Nova and Flexible content.

Biggest thing that is not currently working is display of validation messages. Nova's fields pass currentField to DefaultField.vue which is a computed property on the DependentFormField.js mixin. This property is initially set from the field properties, but is immediately overwritten by the synced properties on a PATCH to update/creation-fields. The biggest issue is that this patch includes validationKey and therefore resets the overwritten value in group.js from Flexible Content.

I have no idea how to override this, so I'm hoping someone else with more knowledge does.

[ianrobertsFF]

Been playing with this a little more this evening.

Have fixed the validationKey being overwritten with a ref for the fields and a mounted hook to check when syncedField is updated and force the syncedField validationKey back to the custom one needed by Flexible Content. Commit below

https://github.com/ianrobertsFF/nova-flexible-content/commit/ccf0a9abad7d474f976ff39222b08223e58accca

[ianrobertsFF]

@voidgraphics

Any movement on this one? Would like to abandon my repo on this. If you have any notes on my solution I'm happy to take another look at it

[ianrobertsFF]

Closed the PR, will implement in a fork

[Saifallak]

Closed the PR, will implement in a fork

any sol. so far?

[ianrobertsFF]

Yeah, as I said I implemented in a fork, although that fork is a little behind on merging the main repos commits.

[Saifallak]

Yeah, as I said I implemented in a fork, although that fork is a little behind on merging the main repos commits.

fork url please? and branch ?

[ianrobertsFF]

Yeah, as I said I implemented in a fork, although that fork is a little behind on merging the main repos commits.

fork url please? and branch ?

https://github.com/Formfeed-UK/nova-flexible-content

If you use it, please don't expect immediate feature merges, bug fixes should be pretty quick though.