Components in Repeater: State path is not as expected
Package
filament/filament
Package Version
v3.2.81
Laravel Version
v10.48.11
Livewire Version
No response
PHP Version
PHP 8.2.19
Problem description
I have this multi-step form in the Create process:
When I use the toggle switch of the first element, a "Select pick-up address" action opens. The same behavior is also for the second element.
I click on "Select pick-up address" and fill out the form.
Now I save the form. With "dd()" I can see that the state path "data.warehouses.7d5db080-f872-44a9-ae71-4d0a22dab5ad.transportation_info" is now addressed.
Now I repeat the steps for the second element. When I fill out the form there, I again get the feedback that the state path "data.warehouses.7d5db080-f872-44a9-ae71-4d0a22dab5ad.transportation_info" is addressed.
Expected behavior
I expect to get a different unique ID for the second repeater element than for the first repeater element. But this is not the case.
Steps to reproduce
use App\Filament\Forms\Components\TextInput;
use App\Filament\Forms\Components\Toggle;
use App\Filament\Heroicons\Heroicon;
use App\Filament\Traits\Resource\HasLabel;
use App\Helper\FilamentComponentAddress\FilamentComponentAddress;
use App\Models\Company;
use App\Models\Warehouse;
use App\Palletspace\app\Http\Helpers\Repeater\RepeaterData;
use Closure;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Placeholder;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Form;
use Filament\Forms\Get;
use Filament\Resources\Resource;
use Illuminate\Support\HtmlString;
public static function warehousesStep()
{
$defaultWarehouses = [
[
'id' => 1,
'name' => 'Reinhardt Stahl KG',
'city' => 'Wittenberg',
'price_per_pallet_inbound' => 2.96,
'price_per_day_storage' => 4.98,
'price_per_pallet_outbound' => 2.2,
'max_pallet_height_in_rack_storage' => 239,
'max_pallet_weight_in_rack_storage' => 326,
'max_pallet_length_in_rack_storage' => 1200,
'max_pallet_width_in_rack_storage' => 800,
'max_pallet_positions_palletspace' => 78,
'transportation_requested' => false,
'transportation_provider' => 'superlogistics',
'pickup_address' => [
'company_name' => '',
'address_line_1' => '',
'address_line_2' => '',
'postal_code' => '',
'city' => '',
'country' => '',
'accepted_transport_offer_terms' => false,
],
],
[
'id' => 6,
'name' => 'Mayr GmbH & Co. KG',
'city' => 'Gebsattel',
'price_per_pallet_inbound' => 2.37,
'price_per_day_storage' => 4.23,
'price_per_pallet_outbound' => 2.99,
'max_pallet_height_in_rack_storage' => 1093,
'max_pallet_weight_in_rack_storage' => 441,
'max_pallet_length_in_rack_storage' => 1200,
'max_pallet_width_in_rack_storage' => 800,
'max_pallet_positions_palletspace' => 361,
'transportation_requested' => false,
'transportation_provider' => 'superlogistics',
'pickup_address' => [
'company_name' => '',
'address_line_1' => '',
'address_line_2' => '',
'postal_code' => '',
'city' => '',
'country' => '',
'accepted_transport_offer_terms' => false,
],
],
];
return [
Repeater::make('warehouses')
->hiddenLabel()
->addAction(function (Action $action, Repeater $repeater) {
return $action->label(__('Add warehouse'))
->color(function () {
return 'primary';
})
->modalHeading(__('Select a warehouse'))
->modalDescription(fn () => __('Please select a warehouse from the list below.'))
->modalSubmitActionLabel(__('Yes, add warehouse'))
->modalCancelActionLabel(__('Cancel'))
->form(function (Form $form) use ($repeater) {
return $form
->schema([
Select::make('warehouse_id')
->label(__('Warehouse'))
->allowHtml()
->getSearchResultsUsing(function (Select $component, string $search) use ($repeater) {
$ignorableIds = collect($repeater->getState())->map(fn ($item) => $item['id'])->toArray();
$warehouses = Warehouse::with(['property', 'palletspacePrices'])
->whereHas('property', function ($query) {
$query->where('is_active_palletspace', true);
})
->whereHas('palletspacePrices')
->whereNotIn('id', $ignorableIds)
->where(function ($query) use ($search) {
$query->where('name', 'like', '%'.$search.'%')
->orWhere('city', 'like', '%'.$search.'%')
->orWhere('postal_code', 'like', '%'.$search.'%');
})
->limit(50)
->get();
return $warehouses->mapWithKeys(function ($warehouse) {
return [$warehouse->getKey() => static::getCleanOptionString($warehouse)];
})->toArray();
})
->getOptionLabelUsing(function ($value): string {
$warehouse = Warehouse::find($value);
return static::getCleanOptionString($warehouse);
})
->searchable()
->searchPrompt(__('Search for a warehouse by name, city or postal code'))
->required(),
]);
})
->action(function (array $data, Repeater $component): void {
$warehouse = Warehouse::find($data['warehouse_id'])->load(['palletspacePrices']);
$newUuid = $component->generateUuid();
$items = $component->getState();
$repeaterData = new RepeaterData($warehouse);
$default = $repeaterData->toArray();
if ($newUuid) {
$items[$newUuid] = $default;
} else {
$items[] = $default;
}
$component->state($items);
// $component->getChildComponentContainer($newUuid ?? array_key_last($items))->fill();
$component->collapsed(false, shouldMakeComponentCollapsible: false);
$component->callAfterStateUpdated();
})
->after(function (Repeater $component) {
//
});
})
->relationship()
->grid(2)
->columnSpanFull()
->default($defaultWarehouses)
->schema([
Section::make(__('Transportation'))
->columnSpan('full')
->columns(1)
->schema(function () {
return [
Toggle::make('transportation_requested')
->label(__('Transportation requested'))
->helperText(__('I need transportation for my pallets.'))
->live(debounce: 500)
->default(false),
Grid::make(1)
->live(debounce: 500)
->visible(function (Get $get) {
return $get('transportation_requested') === true;
})
->schema([
Placeholder::make('transportation_info')
->key('transportation_info')
->hintIcon(Heroicon::TRANSPORTATION)
->hintAction(
function () {
return
Action::make('Different pick-up address')
->label(__('Select pick-up address'))
->color('primary')
->modalHeading(__('Select pick-up address'))
->form(function (Placeholder $component, Get $get) use (&$ref) {
$filamentComponent = new FilamentComponentAddress($get);
return [
TextInput::make('pickup_address.company_name')
->default(function () use ($filamentComponent) {
return $filamentComponent->getName();
})
->label(__('Company name'))
->required(),
TextInput::make('pickup_address.address_line_1')
->default(function () use ($filamentComponent) {
return $filamentComponent->getAddressLine1();
})
->label(__('Address line 1'))
->required(),
TextInput::make('pickup_address.address_line_2')
->default(function () use ($filamentComponent) {
return $filamentComponent->getAddressLine2();
})
->label(__('Address line 2')),
Grid::make()
->schema([
TextInput::make('pickup_address.postal_code')
->default(function () use ($filamentComponent) {
return $filamentComponent->getPostalCode();
})
->validationAttribute(__('Postal code'))
->minLength(5)
->maxLength(5)
->label(__('Postal code'))
->required(),
TextInput::make('pickup_address.city')
->default(function () use ($filamentComponent) {
return $filamentComponent->getCity();
})
->label(__('City'))
->required(),
]),
\App\Filament\Forms\Components\Select::make('pickup_address.country')
->validationAttribute(__('Country'))
->label(__('Country'))
->options(Company::getCountryOptions())
->required()
->default(function () use ($filamentComponent) {
return $filamentComponent->getCountry();
}),
Toggle::make('pickup_address.accepted_transport_offer_terms')
->validationAttribute(__('Transport offer terms'))
->accepted()
->required()
->label(new HtmlString(sprintf(
'<a href="%s" target="_blank">%s</a>',
route('palletspace.terms-of-services'),
__('Transport offer terms'),
)))
->helperText(__('I agree to the terms and conditions.'))
->required()
->default(function () use ($filamentComponent) {
return $filamentComponent->getAcceptedTransportOfferTerms();
}),
];
})
->modalSubmitActionLabel(__('Save'))
->action(function ($component) {
$statePath = $component->getStatePath(); // data.warehouses.*.transportation_info
dd($statePath);
});
}
)
->hiddenLabel()
->content(function (Get $get): string {
$filamentComponent = new FilamentComponentAddress($get);
if (! $filamentComponent->getName() || ! $filamentComponent->getAddressLine1() || ! $filamentComponent->getPostalCode() || ! $filamentComponent->getCity() || ! $filamentComponent->getCountry() || ! $filamentComponent->getAcceptedTransportOfferTerms()) {
return __('Please select a pick-up address.');
}
return __('Pick-up address: :address', [
'address' => $filamentComponent->getHumanReadableAddress(),
]);
}),
]),
];
}),
])
->deleteAction(
function (Action $action) {
return $action->requiresConfirmation();
},
)
->itemLabel(fn (array $state): ?string => $state['name'] ?? null)
->validationAttribute(__('Warehouses'))->rules([
function () {
return function (string $attribute, $value, Closure $fail) {
$min = 1;
if (count($value) < $min) {
$fail(trans_choice('validation.gte.array', $min, [
'value' => $min,
]));
}
};
},
]),
];
}
Reproduction repository (issue will be closed if this is not valid)
https://github.com/silaswint/filament-repeater-bug
Relevant log output
No response
filamentphp / filament
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
19.2k
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too