x-splade-form submit-on-change doesn't work with x-splade-textarea

[JapSeyz]

• Laravel Version: 9.47.0
• PHP Version: 8.1.14
• Splade JS Version (npm): 1.1.7
• Splade PHP Version (composer): 1.1.7

You may use the built-in Artisan Command to show the installed versions of the packages:

php artisan splade:show-versions

Description:

<x-splade-form :action="route('profile.update')" :default="$user" class="space-y-4" submit-on-change preserve-scroll>
        <x-splade-textarea name="description" autosize label="{{ __('Describe yourself') }}" rows="4" />
    </x-splade-form>

As soon as a single key is pressed and released, the textarea gets disabled while it waits for the submit roundtrip. Ideally, only a blur event should trigger a save, for text fields.

Steps To Reproduce Issue:

[bdsumon4u]

Does it work with x-splade-select with choices?

[JapSeyz]

Apologies for the vague description. It's not that it doesn't work, more like, it works too well.

On every keypress for a text-field, the form disables the input while the form is getting submitted.

It works fine and as expected for select/choices. (as only one keypress is needed)

[pascalbaljet]

This feature was built with a select element in mind. How would you like the component to behave? More like a 'saved in the background' thing?

[iMusicJJ]

Yeah, exactly. It seems perfect for save in the background.

[pascalbaljet]

Cool, I'll work on that!

[pascalbaljet]

Not documented yet, but you may now (v1.2.6) add a background and debounce attribute to the Form Component (debounce in milliseconds):

<x-splade-form submit-on-change background debounce="500">
    <x-splade-input name="description" />

    <p v-if="form.processing">Not triggered in background</p>
    <p v-if="form.processingInBackground">Form is processing in background</p>

    <x-splade-submit />
</x-splade-form>

The form.processing prop won't do anything when it's submitting in the background, but you can still show an indicator with the form.processingInBackground prop.

[iMusicJJ]

Beautiful.

Edit: It works like a charm.

It may be prudent to add a way to clear all toasts from the PHP code.
So you don't spam Form updated successfully toasts every 500 ms. Showing a single one is fine, but showing 3-6 becomes a bit aggressive. I fixed by lowering the autodismiss to 1s, which is perfectly fine. It's only meant as a feature idea :)

[pascalbaljet]

I'll add something like Splade::isBackgroundRequest() and Toast::info()->notOnBackgroundRequest(). Probably have to come up with better names 😅

[JapSeyz]

Yeah sure - again it works fine as is. It just requires a very low auto-dismiss timeout, in order to prevent a flood of notifications. But it's still nice to get a visual confirmation that your details were saved.

I probably wouldn't use the notOnBackgroundRequest option, as it would prevent the visual cue that your changes were saved.

The optimal setup would be to limit the amount of toast w/ the same messages to only one. IMO. but that's a harder problem to tackle altogether. Therefore maybe the ability to fire an event that simply clears all toasts could also work.

Eg. on the controller you know is receiving the background request, you could clear all toasts and then simply fire the new "changes saved" message - thus ensuring only a single instance of it is shown at a time.

Again, it's only nice-to-have at best. It works fantastically w/ the low timeout now, so no worries about it :)