Filament•13mo ago

Modify text area content with Alpine

I'd like my text area to automatically add this line in the content: [Edited on 11-6-2023] on blur. (Except when the last line is exactly that already.) I already have some autosave magic going on in afterStateUpdated, so I'd like to have this functionality client side with Alpine. Do I need a custom field? Or can I add Alpine to a standard Textarea component? I see ->extraAlpineAttributes() but I can't find that in the docs. I tried playing around with a custom field, but I have no idea how to change the value while playing nice with Alpine/Filamen state.

1 Reply

JohnOP•13mo ago

I've looked at a plugin and came up with the following. Custom component based on Textarea, with some stuff added in the blade:

<x-dynamic-component
        {{-- Here be Filament stuff --}}
>
    <textarea
        {{-- Here be Filament stuff --}}
        x-data="{
            state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},

            date: '[Edited on {{ now()->isoFormat('dddd LL') }}]',

            blur: function () {
                this.state = this.$refs.textarea.value
                if (!this.state.endsWith(this.date)) {
                    this.state = this.state + '\n' + this.date
                }
                this.$refs.textarea.value = this.state
            }
        }"
        x-ref="textarea"
        x-on:blur="blur()"
    ></textarea>
</x-dynamic-component>

<x-dynamic-component
        {{-- Here be Filament stuff --}}
>
    <textarea
        {{-- Here be Filament stuff --}}
        x-data="{
            state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},

            date: '[Edited on {{ now()->isoFormat('dddd LL') }}]',

            blur: function () {
                this.state = this.$refs.textarea.value
                if (!this.state.endsWith(this.date)) {
                    this.state = this.state + '\n' + this.date
                }
                this.$refs.textarea.value = this.state
            }
        }"
        x-ref="textarea"
        x-on:blur="blur()"
    ></textarea>
</x-dynamic-component>

I'm still confused about why I need both state: $wire ... and manually getting and setting the x-ref. But... the important part is that it works! Just leaving this code here for others. Please let me know if I got stuff wrong or could have done easier/better.

Gaming

Programming

Modify text area content with Alpine