Filament•14mo ago

Dependent CheckboxList not working

Hello, I have a cities CheckboxList that depends on a states Select which also depends on a suppliers Select. Meaning that when I select one or more suppliers, the states select should display the states belongs to the selected suppliers, and when I select the states, the CheckboxList should show all the cities that belongs to the selected states. The dependent suppliers and states Selects work just fine but I am having an issue with the cities CheckboxList, for some odd reason it is not displaying the results. It just display the empty state message. I even added a dependent cities Select just to make sure that the relationships are correctly set up as it is shown in the video, they are. So I am not quite sure the reason why the cities CheckboxList isn't working. Here's a gist with the code snippets: https://gist.github.com/nerdroid23/389739e1210bcc7fcd4f3df637bf0d79 Any help or insights would be greatly appreciated, thanks!

Gist

Issue with dependent CheckboxList

Issue with dependent CheckboxList. GitHub Gist: instantly share code, notes, and snippets.

10 Replies

cheesegrits•14mo ago

Hmm, strange. I don't see anything wrong with that code, and I tested it by modifying the Demo app to have a similar dependency using a checkbox, just to test the concept, and it works fine. Which suggests the issue might be with the relationship type, as my test isn't using a pivot. But I don't really have anything set up I can test that with. If you can create a reproduction repo I can test with, I'll debug it for you.

  Forms\Components\Select::make('parent_categories')
      ->label('Parent')
      ->relationship(
          'categories',
          'name',
          fn (Builder $query) => $query->whereNull('parent_id')
      )
      ->multiple()
      ->preload()
      ->live()
      ->required(),

  Forms\Components\CheckboxList::make('categories')
      ->relationship(
          'categories',
          'name',
          fn (Builder $query, Forms\Get $get) => $query->whereIn('parent_id', $get('parent_categories'))
      )
      ->searchable()
      ->bulkToggleable()
      ->required(),

  Forms\Components\Select::make('parent_categories')
      ->label('Parent')
      ->relationship(
          'categories',
          'name',
          fn (Builder $query) => $query->whereNull('parent_id')
      )
      ->multiple()
      ->preload()
      ->live()
      ->required(),

  Forms\Components\CheckboxList::make('categories')
      ->relationship(
          'categories',
          'name',
          fn (Builder $query, Forms\Get $get) => $query->whereIn('parent_id', $get('parent_categories'))
      )
      ->searchable()
      ->bulkToggleable()
      ->required(),

nerdroidOP•14mo ago

Another thing I noticed is that when I remove searchable() from the checkbox list, it works just fine. I'll set up a reproduction repo tonight and i'll send you the link. Thanks!

nerdroidOP•14mo ago

hey @Hugh Messenger sorry to ping you this late and I apologize for tagging you directly. Here's a link to the repo https://github.com/nerdroid23/filament-checkboxlist-issue

GitHub

GitHub - nerdroid23/filament-checkboxlist-issue: Demo to showcase i...

Demo to showcase issue with dynamic CheckboxList. Contribute to nerdroid23/filament-checkboxlist-issue development by creating an account on GitHub.

nerdroidOP•14mo ago

if you'll need anything else from me, let me know, please and thanks again for taking a look!

cheesegrits•14mo ago

n/p, I'll take a look some time tonight

cheesegrits•14mo ago

I can see what's going wrong, but for the life of me can't figure out the fix. The problem is on this line, the x-show for the options. Which, if searchable, checks to see if any options are currently visible with the current search string, and if not, hides them (and shows the "no records match your search" msg instead). The problem is, the function that figure out which options should be visible relies on the main checkboxListOptions array, which is built in the x-init on line 14 from the options present in the DOM. But the x-init only runs once, when the component is first loaded, and of course there are no options on the DOM at that point, because your checkbox list is empty until the dependency gets met. And x-init It doesn't run after Livewire updates. So on line 37, after your dependent stuff kicks off a Livewire update and the Livewire.hook code runs, and re-runs updateVisibleCheckboxListOptions() ... it doesn't find any options, because the main checkboxListOptions is still empty. So visibleCheckboxListOptions remains empty, and x-show remains hidden. I tried half a dozen different ways to rebuild the checkboxListOptions array during the Livewire.hook code, but can't figure it out. Can you submit an issue on the Filament Github, provbide this repo as your repro. I'll summarize my findings there, and someone on the core team smarter than I am with Livewire can figure out the solution. https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/checkbox-list.blade.php#L148

GitHub

filament/packages/forms/resources/views/components/checkbox-list.bl...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

nerdroidOP•14mo ago

Thanks for taking the time to check this, appreciate it very much! Also now that you mention how the options array is empty because x-init only runs once, while testing stuff out, the checkbox list on the edit form worked just fine. I'll open the issue at some point tonight, thanks again!

nerdroidOP•14mo ago

Here's the link to the issue, in case you'd still like to add your your findings to help the core team figure this out https://github.com/filamentphp/filament/issues/9063 Thanks again, I appreciate you spending time on this!

GitHub

Dependent CheckboxList not working · Issue #9063 · filamentphp/fila...

Package filament/filament Package Version v3.0.73 Laravel Version v10.28.0 Livewire Version v3.0.8 PHP Version PHP 8.1.19 Problem description Hello, I have a cities CheckboxList that depends on a s...

cheesegrits•14mo ago

@nerdroid23 I stumbled on the fix while working on another issue. PR that fixes this was merged last night, and should be in 3.0.76, so an update should fix it for ya. https://github.com/filamentphp/filament/pull/9087

GitHub

Wrap Livewire hook code in $nextTick in CheckboxList by cheesegrits...

Changes have been thoroughly tested to not break existing functionality. Fixes #9063 Need to re-read the checkboxes from the DOM after a Livewire update (they may have have changed), which also me...

nerdroidOP•14mo ago

Thanks @Hugh Messenger that was fast, appreciate it! 🙌

Gaming

Programming

Dependent CheckboxList not working