Toggling editability on fields in a repeater
I've got a repeater with 2 fields in it.
While on the edit view I need the textarea disabled, and the checkbox hidden by default.
Then, I need a button to "unlock" those fields for editing. As in, show the checkbox and un-disable the textarea.
Yes, it sounds wacky, but it's what my client wants I'm afraid. π
I tried using
live()
on the toggle, and having both disabled()
and hidden()
use the value from a toggle outside the repeater to try and do what I wanted but that didn't seem to work.Solution:Jump to solution
So, for others trying to do insanity like me: Remember that inside repeaters you gotta use
../../
if you wanna use $get
- This is covered in the documentation here: https://filamentphp.com/docs/3.x/forms/fields/repeater#using-get-to-access-parent-field-values9 Replies
Oh, it also happens when I click the button to add an item to my repeater.
Is there some kind of livewire or alpine event I can hook into to trigger my custom JS function so the code is reapplied?
Feels like I'm getting closer using a mutation observer to listen for whenever Filament adds "data-has-alpine-state", but that only works once.
Been trying with this, but uh. While it DOES throw triggered in the console, the field isn't shown.
Does Filament have some kind of snapshot of what the form looks like before buttons are pressed, and that overwrites any changes made after the fact, or something along those lines?
Now I'm trying a different approach. I made a Toggle component and used the
extraAttributes
function to add an onclick that triggers my JS. That seems to work somewhat.
I want it to unhide and undisable fields in my repeater (a checkbox and a textarea field)
I tried with live()
on my toggle, and disabled()
+ hidden()
on the two components. Though that didn't do anything at all. Can live not work from outside a repeater with things inside a repeater?Can you take a step back and describe exactly what you are trying to achieve?
Sure thing. I've got a repeater with 2 fields in it.
While on the edit view I need the textarea disabled, and the checkbox hidden by default.
Then, I need a button to "unlock" those fields for editing. As in, show the checkbox and un-disable the textarea.
Yes, it sounds wacky, but it's what my client wants I'm afraid. π
I tried using
live()
on the toggle, and having both disabled()
and hidden()
use the value from a toggle outside the repeater to try and do what I wanted but that didn't seem to work.So the button to unlock is where? Outside the repeater? And it "unlocks" all the instances of the repeat?
It's outside the repeater, yes, and it's supposed to toggle all instances of the textarea and checkbox inside each repeater, yes.
Looks like this. Clicking the toggle up above should disable the textareas, and hide the checkboxes underneath said textareas.
So I tried with the toggle again, without
->live()
, and now it does seem to toggle when using ->disabled(fn (Get $get) => $get('unlock_fields') !== true)
and ->hidden(fn (Get $get) => $get('unlock_fields') !== true)
- but the checkbox isn't actually being shown, just the container for it.
Using ->live()
briefly unlocks the textarea and shows the container for the checkbox, but half a second later it's like it was toggled back to the original state.
Oh. That was my JS that I forgot to remove. Whoops.
Further investigation has revealed to me that the $get
I've been using there apparently can't fetch data from outside the repeater.
Aaaand that's covered in the docs. Got it working. πSolution
So, for others trying to do insanity like me: Remember that inside repeaters you gotta use
../../
if you wanna use $get
- This is covered in the documentation here: https://filamentphp.com/docs/3.x/forms/fields/repeater#using-get-to-access-parent-field-valuesGlad you got it figured out. Sorry I didn't respond quicker, been taking a new client site live.