[Bug]: Component cannot be used multiple times in the same form

[mariomeyer]

What happened?

Using the component on a Wizard form with one step for Origin (From) and another step for Destination (To) a few wierd things happen:

1. To form come's up with place_id pre-populating the search field. I guess this is due to the state being saved on google_autocomplete and not in a state with the name of the component make(). I can always cleanup the state after validation of the first step, but it's not ideal to have to do it manually. Maybe the state should be tied to the name selected when making the component.

2. Component not updating withFields on the second step of the wizard. Still trying to figure out why.

How to reproduce the bug

protected function fields(string $name): array
{
        return [
            TextInput::make("data.{$name}.line_1")
                ->readOnly()
                ->required()
                ->extraInputAttributes([
                    'data-google-field' => '{street_number} {route}',
                ])->columnSpan('full'),
            TextInput::make("data.{$name}.line_2")
                ->maxLength(255)
                ->columnSpan('full'),
            TextInput::make("data.{$name}.city")
                ->readOnly()
                ->required()
                ->extraInputAttributes([
                    'data-google-field' => '{locality}{sublocality}',
                ]),
            TextInput::make("data.{$name}.state")
                ->readOnly()
                ->required()
                ->extraInputAttributes([
                    'data-google-field' => 'administrative_area_level_1',
                    'data-google-value' => 'short_name',
                ]),
            TextInput::make("data.{$name}.zip")
                ->readOnly()
                ->required()
                ->extraInputAttributes([
                    'data-google-field' => 'postal_code',
                ]),
            TextInput::make("data.{$name}.country")
                ->readOnly()
                ->required()
                ->extraInputAttributes([
                    'data-google-field' => 'country',
                    'data-google-value' => 'short_name',
                ]),
            TextInput::make("data.{$name}.latitude")
                ->hidden()
                ->extraInputAttributes([
                    'data-google-field' => '{latitude}',
                ]),
            TextInput::make("data.{$name}.longitude")
                ->hidden()
                ->extraInputAttributes([
                    'data-google-field' => '{longitude}',
                ]),
        ];
}
protected function destination(): Wizard\Step
{
        return Wizard\Step::make('Destination')
            ->schema([
                Fieldset::make('Receiver Information')
                    ->columns(3)
                    ->schema([
                        TextInput::make('data.to.name')
                            ->label('Name')
                            ->required(),
                        TextInput::make('data.to.phone')
                            ->label('Phone')
                            ->required()
                            ->mask('(999) 999-9999'),
                        TextInput::make('data.to.company')
                            ->label('Company'),
                    ]),
                GoogleAutocomplete::make('to')
                    ->label('Receiver Address')
                    ->countries(['us'])
                    ->withFields($this->fields('to'))
                    ->columnSpanFull(),

            ])
            ->icon('heroicon-o-arrow-right-end-on-rectangle')
            ->completedIcon('heroicon-o-check-circle');
            // ->afterValidation(function () {
            //     // $this->google_autocomplete = null;
            // });
}

protected function origin(): Wizard\Step
{
        return Wizard\Step::make('Origin')
            ->schema([
                Fieldset::make('Sender Information')
                    ->columns(3)
                    ->schema([
                        TextInput::make('data.from.name')
                            ->label('Name')
                            ->required(),
                        TextInput::make('data.from.phone')
                            ->label('Phone')
                            ->required()
                            ->mask('(999) 999-9999'),
                        TextInput::make('data.from.company')
                            ->label('Company'),
                    ]),
                GoogleAutocomplete::make('from')
                    ->label('Sender Address')
                    ->countries(['us'])
                    ->withFields($this->fields('from')),
            ])
            ->icon('heroicon-o-arrow-right-start-on-rectangle')
            ->completedIcon('heroicon-o-check-circle');
            // ->afterValidation(function () {
            //     $this->google_autocomplete = null;
            // });
}
public function form(Form $form): Form
{
  $wizard = [
    $this->origin();
    $this->destination();
  ];

  $form->schema([
    Wizard::make($wizard);
  ]);
}

Package Version

1.0.4

PHP Version

8.3.14

Laravel Version

11.36.1

Which operating systems does with happen with?

macOS, Linux

Notes

No response