Filament•14mo ago

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:

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-values

Jump to solution

9 Replies

SauravisusOP•14mo ago

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.

window.addEventListener('livewire:initialized', function() {
    Livewire.hook('morph.updated', ({
        el,
        component
    }) => {
        if (el.classList.contains('fi-form')) {
            doRepeaterThings();
            console.log('Triggered');
        }
    })
});

window.addEventListener('livewire:initialized', function() {
    Livewire.hook('morph.updated', ({
        el,
        component
    }) => {
        if (el.classList.contains('fi-form')) {
            doRepeaterThings();
            console.log('Triggered');
        }
    })
});

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?

cheesegrits•14mo ago

Can you take a step back and describe exactly what you are trying to achieve?

SauravisusOP•14mo ago

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.

cheesegrits•14mo ago

So the button to unlock is where? Outside the repeater? And it "unlocks" all the instances of the repeat?

SauravisusOP•14mo ago

It's outside the repeater, yes, and it's supposed to toggle all instances of the textarea and checkbox inside each repeater, yes.

SauravisusOP•14mo ago

Looks like this. Clicking the toggle up above should disable the textareas, and hide the checkboxes underneath said textareas.

SauravisusOP•14mo ago

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

Sauravisus•14mo ago

cheesegrits•14mo ago

Glad you got it figured out. Sorry I didn't respond quicker, been taking a new client site live.

Gaming

Programming

Toggling editability on fields in a repeater