Disable dependent select
Hello, I have 2 dependent select inputs where the 2nd one should be disabled until a selection is made on the first. I first tried hiding it and that works with no issues when I do something like: ->hidden(fn (Closure $get) => $get('state')=== null), and once I make a selection it becomes visible, now, I tried the same but with ->disabled, but once a selection is made that does not enables the select. Should I be doing something different here?
10 Replies
I think there are issues with ChoicesJS and we can’t disable it once it’s initialized
Ok, I think you mean enable but I think the issue is the same right? Once initialized with either state, it cannot be modified due to the issue?
I wonder if your creating a loop here. By getting and setting both fields at the same time it could be creating weird indeterminate state. Also try fn () => State… in the state fields options.
yeah correct
Here’s a reference to the bug @Dennis Koch was referring to: https://github.com/Choices-js/Choices/issues/1025 There is also a proposed workaround that seems could be implemented by passing the disabled attribute into Filament’s select.js and then enabling/disabling it there. @rg.block Might be worth exploring?
GitHub
Options remain disabled after enabling a select · Issue #1025 · Cho...
Describe the bug If a select has the disabled attribute set in the original HTML code before Choices is created all options remain disabled after a call to .enable(); To Reproduce See attached exam...
Thank you all for your responses and suggestions, I really appreciate you taking the time to respond. I am going to try with the one referenced by archilex and follow with a response here just in case someone else runs into the same issue.
even if we passed a disabled attribute, the problem is that the code wouldnt be updated after a livewire request properly
True, it seems there is no optimal solution at this time. I am leaning towards just populating the city select with all the options, and filter them if a state gets selected. As I mentioned in my original post, hiding the city one works, but UX wise does not seem to be the optimal way.
i don't feel like hiding is bad UX
sort table