How to clear field values on change

[jdean162]

Hi there!
I can't seem to find how to empty a field value when i change a Select value from another field.
Say i have my Select field "object", i wish to hide/show the fields associated to the value i choose.

Select::make(__('fields.object'), 'object')
                    ->native()
                    ->options([
                        'catalog' => __('catalog'),
                        'product' => __('product')
                    ])
                    ->xModel(),
BelongsTo::make(__('fields.catalog'),
                    'catalog',
                    resource: new CatalogResource())
                    ->xModel()
                    ->nullable()
                    ->xShow('object', '=','catalog'),
BelongsTo::make(__('fields.main-product'),
                    'product',
                    resource: new ProductResource())
                    ->xModel()
                    ->nullable()
                    ->xShow('object', '=','product'),

The xShow works fine, but doesn't clear the value.
What is the best way to do this ?
I tried using reactive() like in the documentation, but I don't think i'm implementing it correctly. Or can i use the onChangeMethod() ?

Thanks :)

[lee-to]

Example with reactive

Select::make('Select')
  ->options([
      1 => 1,
      2 => 2,
  ])
  ->reactive(function (Fields $fields, mixed $value, Select $ctx, array $values) {
      if($values['color'] === 'R') {
          // change options  - $ctx->options([]);

          $ctx->setValue(2);
      }

      return $fields;
  }),

Enum::make('Color')
  ->reactive()
  ->attach(ColorEnum::class)
,

[jdean162]

Thanks lee-to,
Your example works well, so when a value R is set on the ColorEnum, i can empty my Select options.
I tried reusing that logic in my example but doesn't seem to work :

Select::make(__('fields.object'), 'object')
                    ->native()
                    ->options([
                        'catalog' => __('catalog'),
                        'product' => __('product')
                    ])
                    ->reactive()
                ->xModel(),

                BelongsTo::make(__('fields.catalog'),
                    'catalog',
                    resource: new CatalogResource())
                    ->xModel()
                    ->nullable()
                    ->reactive(function (Fields $fields, mixed $value, Select $ctx, array $values) {
                        if($values['object'] === 'product') {
                            $ctx->options([]);
                        }

                        return $fields;
                    })
                    ->xShow('object', '=','catalog'),


                BelongsTo::make(__('fields.main-product'),
                    'product',
                    resource: new ProductResource())
                    ->xModel()
                    ->nullable()
                    ->reactive(function (Fields $fields, mixed $value, Select $ctx, array $values) {
                        if($values['object'] === 'catalog') {
                            $ctx->options([]);
                        }

                        return $fields;
                    })
                    ->xShow('object', '=','product'),

Is it link to the fact i'm using BelongsTo and not passing a BelongsTo in my reactive function params?
What is the best way to debug inside the function ?

Thanks :)

[lee-to]

BelongsTo is not Select, it has a different logic for specifying options, try setValue or setValues

[jdean162]

Neither of these seem to work unfortunately. I tried
$ctx->setValue(null); // setValue('') returns an error
$ctx->setValues([]);

Not sure why, but no logs pop up when i change my object value :

Select::make(__('fields.object'), 'object')
                    ->native()
                    ->options([
                        'catalog' => __('catalog'),
                        'product' => __('product')
                    ])
                    ->reactive(function (Fields $fields, mixed $value, Select $ctx, array $values) {
                        Log::info($value);
                        Log::info($values);
                        return $fields;
                    })
                ->xModel(),

But does show up when i change my Belongsto values, and my object field is always null.

local.INFO: array (
  'object' => NULL,
  'catalog_id' => '1',
  'product_id' => '1',
)  

[jdean162]

Wait the setValue(null) seems to work.
I just need to find why my object Select is sending Null

[lee-to]

Wait the setValue(null) seems to work.

I just need to find why my object Select is sending Null

reactivity adds the xModel attribute to the field and you can also hang it afterwards and redefines the name

[lee-to]

The values ​​of the BelongsTo field are Model collection, the selected value is also a Model object, not primitives as in the Select

Also look at the asyncSearch method of the BelongsTo, you can change the searchQuery, inside there will be a request with all the form data, based on which you can change the builder

[jdean162]

lee-to
It seems that the reactive() doesn't take effect if the xModel() is on the same field :
Enum::make('Color')
->reactive()
->xModel()

When i remove the xModel, the values clear on my Enum change.
How can i use them together to alse hide either the CatalogRessource or the ProductRessource ?

Otherwise i'll just have to use the afterSave to empty the values

[lee-to]

reactivity under the hood hangs the xModel method and you then redefine it, it already exists with the name reactive.{column}

[lee-to]

Just use reactive.{column}

[jdean162]

Only using XShow() still doesn't seem to unhide the fields even if the fields clear with reactive()

public function fields(): array
    {
        $type = $this->getItem()?->object;
        return [
            Block::make([
                Enum::make(__('fields.object'), 'object')
                    ->reactive()
                    ->attach(DiscountObjectsEnum::class),

                BelongsTo::make(__('fields.catalog'),
                    'catalog',
                    resource: new CatalogResource())
                    ->nullable()
                    ->reactive(function (Fields $fields, mixed $value, BelongsTo $ctx, array $values) {
                        if($values['object'] === 'product') {
                            $ctx->setValue(null);
                        }
                        return $fields;
                    })
                    ->xShow('object', '=','catalog'),

                BelongsTo::make(__('fields.main-product'),
                    'product',
                    resource: new ProductResource())
                    ->nullable()
                    ->reactive(function (Fields $fields, mixed $value, BelongsTo $ctx, array $values) {
                        if($values['object'] === 'catalog') {
                            $ctx->setValue(null);
                        }
                        return $fields;
                    })
                    ->xShow('object', '=','product'),
            ])->xData(['object' => $type]),
        ];
    }

is there a function i can call in the reactive callback ?

[lee-to]

if you use a reactive then under the hood will be added xModel with the reactive prefix. object = reactive.object. Open the DOM inspector and you will see everything yourself)

[jdean162]

Ok so renaming
xShow('object', 'product')
to
xShow('reactive.object', 'product')

does the trick! Thank you, i did not understand the phrase "Just use reactive.{column}" correctly

On the xData however, need to pass object, not reactive.object :
xData(['object' => $this->getItem()?->object])
But all works!

[lee-to]

By default, all reactive fields are automatically added to the xDate form with the name reactive.$column.
On each reactive field an x-model of reactive.$column.
Therefore, if you use the reactive and xModel methods at once, you will overwrite xModel from the reactive and break the logic.