Filament•10mo ago

Select (native: false) disabled but user can choose options

I am using a non-native select with a disabled using a closure, the select is disabled when needed but the user can always choose between options

public function timeRegistrationForm(Form $form): Form
{
  return $form
    ->schema([
    Select::make('project')
      ->label('Project')
      ->options(/*  */)
      ->searchable()
      ->disabled(fn() => $this->disableFunction())
      ->required(),
    //...
  ])->statePath('timeRegistration');
}

public function timeRegistrationForm(Form $form): Form
{
  return $form
    ->schema([
    Select::make('project')
      ->label('Project')
      ->options(/*  */)
      ->searchable()
      ->disabled(fn() => $this->disableFunction())
      ->required(),
    //...
  ])->statePath('timeRegistration');
}

I am using the following code in my blade view to render the form

{{ $this->timeRegistrationForm }}

{{ $this->timeRegistrationForm }}

the definition of my form is as follow:

protected function getForms(): array
{
    return [
        'timeRegistrationForm'
    ];
}

protected function getForms(): array
{
    return [
        'timeRegistrationForm'
    ];
}

I will put two screenshots, the first contains the enabled select and the second is the disabled select

25 Replies

LeandroFerreira•10mo ago

did you add the mount method with form->fill()?

DarkOP•10mo ago

@Leandro Ferreira Yes I have this:

public function mount(): void
{
    // ...

    // Fill different forms
    $this->timeRegistrationForm->fill();
}

public function mount(): void
{
    // ...

    // Fill different forms
    $this->timeRegistrationForm->fill();
}

LeandroFerreira•10mo ago

Please share the whole code you are trying to do..

DarkOP•10mo ago

here is the component code: https://gist.github.com/heloufir/58f39335b877a7ded91dfbbe0e10d1a6 and the blade code: https://gist.github.com/heloufir/2e94f3ba6a5ce78a70f1524135f7a496

awcodes•10mo ago

You’re extending Page. So you need to call parent::mount() in your mount method.

DarkOP•10mo ago

that throws an exception

Matthew•10mo ago

This might sound silly, but are you sure, the ->disabled() returns true?

DarkOP•10mo ago

Yep, I debugged on that and I am sure, it disables the select but let the user click on the select and see the options. But if I put true without a closure, it works the select is disabled and the user cannot click on it

Matthew•10mo ago

So in other words ->disabled(fn() =>true) doesnt work ->disabled(true) works

awcodes•10mo ago

Can you share the url for this. Something else is going on here. Page definitely has a mount method. It is a livewire component.

DarkOP•10mo ago

no, both of them works (passing true in a closure or not works) but when passing the function as a closure that does not work

awcodes•10mo ago

It’s weird that it thinks it is the parent

DarkOP•10mo ago

it is not live, but you can see the whole code here: the component code: https://gist.github.com/heloufir/58f39335b877a7ded91dfbbe0e10d1a6 and the blade code: https://gist.github.com/heloufir/2e94f3ba6a5ce78a70f1524135f7a496

awcodes•10mo ago

That error screen has a share link in the top right. That’s what I’m referring too.

DarkOP•10mo ago

oh I thought you were speaking about the project sorry, here is the link: https://flareapp.io/share/353vJpo7/claim/u6uUrQyviOW1qqURquMH1KMAV8xI41Mx

Flare

Method App\Filament\Pages\AdvancedTimeRegistration::mount does not exist. - The error occurred at http://localhost:8000/app/advanced-time-registration

awcodes•10mo ago

hmm. not sure what's going on, but this part doesn't make sense. Method App\Filament\Pages\AdvancedTimeRegistration::mount does not exist. it's like it thinks the parent is itself instead of Page

DarkOP•10mo ago

yep didn't understand too, I am trying to found an explanation 😅

LeandroFerreira•10mo ago

console errors?

DarkOP•10mo ago

nope nothing

awcodes•10mo ago

can you try in a resource on a regular form? looking at the code I think this might be a bug. choices.js should be reading the disabled attribute on the select component. so this is strange

LeandroFerreira•10mo ago

Do you have dependant selects, right? It doesn't happen if you remove searchable(), right?

DarkOP•10mo ago

I will try ASAP and let you know Yes for dependant selects, and if I remove searchable it does work

LeandroFerreira•10mo ago

use ->searchable(fn() => !$disabled) in the selects

DarkOP•10mo ago

yep that does the trick it disables the select and transform it to non-searchable (so, non-native) and the user cannot click on it thanks for the help @awcodes @Leandro Ferreira Should I mark the post as resolved, or should I leave it to see if there is a bug?

awcodes•10mo ago

mark it as resolved. but maybe the docs need to be updated. thanks

Gaming

Programming

Select (native: false) disabled but user can choose options