I can’t for the life of me figure out how I can save a textarea that is linked to a model every 30 seconds and also on blur without a save button and without hitting the database on every keystroke (or even deferred)… any help or guidance would be appreciated. Is there a wire:onBlur or other method that I just can’t locate? Has anyone else solved this?
I am building an application that has some long-form content, and I want to take some worry out of the equation for users so their work is saved every so often without their interaction. I am doing this currently in Trix editor, and although I have the editor working great and saving when a submit is happening, I can’t figure out how to get it to so what I really want (as well as when I need to submit).
<div
class="rounded-md"
x-data="{
value: @entangle($attributes->wire('model')),
isFocused() { return document.activeElement !== this.$refs.trix },
setValue() { this.$refs.trix.editor.loadHTML(this.value) },
}"
x-init="setValue(); $watch('value', () => isFocused() && setValue())"
x-on:trix-change="value = $event.target.value"
{{ $attributes->whereDoesntStartWith('wire:model') }}
wire:ignore
>
<input id="x" type="hidden">
<trix-editor x-ref="trix" input="x" class="form-textarea block w-full min-h-screen transition duration-150 ease-in-out border-0 focus:outline-none"></trix-editor>
</div>
(you can see the behavior on creating a new forum post here (with the check mark in the bottom corner).