Select field overflowing grid layout until you interact with field

I have a Grid form with the following settings:

 Grid::make([
                'default' => 2,
                'sm' => 6,
            ])->extraAttributes(['class' => 'space-y-6'])
                ->schema([
                    TextInput::make('search')
                        ->label('Model Number Search')
                        ->reactive()
                        ->columnSpan(2),
                    Select::make('manufacturer_id')
                        ->label('Manufacturer')
                        ->placeholder('')
                        ->preload()
                        ->multiple()
                        ->reactive()
                        ->afterStateUpdated(function (\Filament\Forms\Set $set, $state) {
                            $set('brand_id', []);
                            $set('family_id', []);
                        })
                        ->options(auth()->user()->currentTeam->manufacturers()->orderBy('name')->pluck('manufacturers.name', 'manufacturers.id')), // @phpstan-ignore-line

...

 Grid::make([
                'default' => 2,
                'sm' => 6,
            ])->extraAttributes(['class' => 'space-y-6'])
                ->schema([
                    TextInput::make('search')
                        ->label('Model Number Search')
                        ->reactive()
                        ->columnSpan(2),
                    Select::make('manufacturer_id')
                        ->label('Manufacturer')
                        ->placeholder('')
                        ->preload()
                        ->multiple()
                        ->reactive()
                        ->afterStateUpdated(function (\Filament\Forms\Set $set, $state) {
                            $set('brand_id', []);
                            $set('family_id', []);
                        })
                        ->options(auth()->user()->currentTeam->manufacturers()->orderBy('name')->pluck('manufacturers.name', 'manufacturers.id')), // @phpstan-ignore-line

...

The columns with select boxes in them are wider than the grid, but as soon as a select an item it seems to correct itself. This is also true if the page is loaded with items already selected. They also overflow until you modify a selection.

1 Reply

swillaOP•16mo ago

Looks like if I change the placeholder fluent method to have a space in it, it fixes it.

->placeholder(' ')

->placeholder(' ')

Gaming

Programming

Select field overflowing grid layout until you interact with field