Kenneth Sese Posts - Answer Overflow

Kenneth Sese

Posts Comments

FFilament

•Created by Kenneth Sese on 6/24/2023 in #❓┊help

Render hooks are duplicated in grouped relation managers

35 replies

FFilament

•Created by Kenneth Sese on 5/23/2023 in #❓┊help

SelectFilter limit

From our discussion in chat: Running into an interesting issue with Select inside a Filter. If you use getSearchResultsUsing() because you need to limit the amount of results, then when you choose the option, it briefly shows the field, but then switches to the id. This only happens when inside a filter. You need to use getSearchResultsUsing because optionLimit doesn't actually limit the number of models...it still loads them all and just displays whatever limit you set. The workaround I've found is that you need to use options() and then make sure the id is included using whereIn. The docs seems to imply that if you need to limit options you need to use getSearchResults() . So maybe optionsLimit() not actually limiting the number of models being loaded isn't a big. However, it the weird thing you can see in the video does seem to be a bug, or at least a weird livewire/alpint/choices.js issue. I'll try to investigate later.

18 replies

FFilament

•Created by Kenneth Sese on 5/7/2023 in #❓┊help

What’s the best way to work on core js files?

I needed to work on the core select.js file to try to find and fix a small bug I found. To make debugging easier I wanted to work on select.js in one of my projects BUT since filament’s js is compiled, I had a hard time figuring out the correct way to work on it. I ended up making the change on my fork of filament, npm run build, and then COPIED the app.js file from Filament into my project to test the change! Over and over again 🤦‍♂️ Barbaric!! It worked, but there has to be a better way. What is it?

16 replies

FFilament

•Created by Kenneth Sese on 5/5/2023 in #❓┊help

Select Field search not reloading options after clearing search

I have a select field that I'm searching on. It searches through an array of data. Searching works, but if you search, then backspace to clear the search, only the last search is appearing. I have to then add a space and to get all the options again. (See video) Am I doing something wrong? Thanks!

Select::make('item')
    ->searchable()
    ->preload()
    ->searchDebounce(200)
    ->options(fn () => static::getItems())
    ->getSearchResultsUsing(function (string $search) {
        return static::getItems($search);
    }),

Select::make('item')
    ->searchable()
    ->preload()
    ->searchDebounce(200)
    ->options(fn () => static::getItems())
    ->getSearchResultsUsing(function (string $search) {
        return static::getItems($search);
    }),

protected static function getItems(string $search = null)
{
    $items = [
        'foo',
        'bar',
    ];

    return collect($items)
        ->filter(function ($item) use ($search) {
            if (blank($search)) {
                return true;
            }
            
            return Str::contains($item, $search);
        })
        ->toArray();
}

protected static function getItems(string $search = null)
{
    $items = [
        'foo',
        'bar',
    ];

    return collect($items)
        ->filter(function ($item) use ($search) {
            if (blank($search)) {
                return true;
            }
            
            return Str::contains($item, $search);
        })
        ->toArray();
}

4 replies

FFilament

•Created by Kenneth Sese on 4/27/2023 in #❓┊help

Image width shrinks when inside table column with smaller name

I'm creating a new table column plugin, "avatar-group", and ran into a weird CSS issue: If the name of a column is smaller in width than the image width, when the table doesn't have enough horizontal space to fit all the columns, the column will collapse to the width of the column name and so will the image!!! It's easier to explain with the video below. It's something I've never run into before because the column name for images is usually something like "Image" or "Avatar" both of which are wider than most images. This is caused by the max-width-full class on <img>s. Adding a css width like w-6 or even w-full doesn't work. You CAN set the width="xx" attribute on the <img> which will prevents it from collapsing. You can also add the max-width-none class. I don't think this is a bug per se, and I don't think there's anything to be PR'ed either. Just wanted to share this interesting issue with others. I banged by head against the screen for a good while trying to figure out why my avatar-group wouldn't show the full width of all the avatars. It was because the total width of all the images was wider than the column name! max-width-none solved it for me.

3 replies

Gaming

Programming