Validation in a Modal

[cjmellor]

Hey,

I was just attempting to build something where I click a Menu Item from the Dropdown component and this opens up a Modal. Inside the Modal is an Input (text) field and a Submit Button.

Clicking the submit button fires a function (wire:click="renameFile($id)") which checks for validation at the start via $this->validate(). Now, the issue here isn't that it isn't validating, it is that when I click the Submit button, the Modal closes and I don't get to see the validation under the input field like I might expect to.

My code, for context:

<flux:modal.trigger :name="'rename-file-'.$voiceIsolation->id">
    <flux:menu.item
        icon="pencil"
        x-on:click="$wire.newFilename = '{{ $voiceIsolation->isolated_basename }}'"
    >
        {{ __('Edit') }}
    </flux:menu.item>
</flux:modal.trigger>

{{-- Modal: Rename file --}}
<flux:modal
    class="md:w-96"
    :name="'rename-file-'.$voiceIsolation->id"
>
    <div class="space-y-6">
        <div>
            <flux:heading size="lg">Rename file</flux:heading>
        </div>

        <flux:input.group>
            <flux:input
                wire:model.self="newFilename"
                autofocus
            />

            <flux:input.group.suffix>.{{ $voiceIsolation->format }}</flux:input.group.suffix>
        </flux:input.group>

        <div class="flex">
            <flux:spacer />

            <flux:button
                type="submit"
                variant="primary"
                wire:click="renameFile('{{ $voiceIsolation->id }}')"
            >
                Save
            </flux:button>
        </div>
    </div>
</flux:modal>

$renameFile = function (string $voiceIsolationId): void {
    $this->validate();

    $voiceIsolation = auth()
        ->user()
        ->voiceIsolations()
        ->findOrFail($voiceIsolationId);

    $directoryPath = Str::beforeLast($voiceIsolation->isolated_path, '/');

    $newFilePath = $directoryPath . '/' . $this->newFilename . '.' . $voiceIsolation->format;

    if (Storage::exists($newFilePath)) {
        Flux::toast(text: __('A file with this name already exists'), variant: 'danger');

        return;
    }

    if (Storage::move($voiceIsolation->isolated_path, $newFilePath)) {
        $voiceIsolation->update(['isolated_path' => $newFilePath]);

        Flux::toast(text: __('File renamed successfully'), variant: 'success');

        $this->reset('newFilename');
    } else {
        Flux::toast(text: __('Failed to rename file'), variant: 'danger');
    }
};

My guess is the Modal will close by default on the submission of a button?

Any guidance on how best to achieve this is appreciated!

Thanks.

[jeffchown]

@cjmellor It's difficult to help when the snippets you provide can't be copy/pasted to reproduce the issue. Your code has external dependencies such as a VoiceIsolation model, etc.

If you could provide a snippet (e.g. Volt component), without any undefined dependencies, that reproduces the issue, it would make it easier for people to try to help.

[AdamRV9]

I use validation inside a modal and it works, as @jeffchown says it's hard to pinpoint the problem without a Volt component.

This is a blind guess, but I note you're using wire:click on your submit button. Have you tried using wire:submit which is designed for submitting forms? There may be some browser action occurring in the background which is closing your modal.

https://livewire.laravel.com/docs/wire-submit

[cjmellor]

I figured it out, it was my code, I had a rogue wire:key I forgot about 🙄