Disable close on away and escape if form is dirty?

[seabasss]

Is there any way to let you close the modal by clicking outside or pressing escape, but only if nothing has changed in the form?

Would be cool to do something like this:

public function closeModalOnEscape():
{
    return !$this->post->isDirty();
}

Or let you show another modal saying "You have unsaved changes. Are you sure you want to close the modal?" if the form is dirty.

Any ideas? Thanks!

[nicko170]

Came here for this. +1. Not sure of the best way to implement it, so had not solved it yet - but I like your solution @seabasss.

[thermiteplasma]

I don't think this is possible. The closeModalOnEscape is handled by alpine. A 'modal attribute' is set for the component (from a static method call) when the new livewire modal component class is created. When the escape button is pressed an alpinejs method is called that reads the value of this modal attribute to decide whether to close or not.

There are ways however that you could change one of these modal attributes after the class is created.

You could fire an event that the main modal class is listening to. Something like below that passes the name of the component, the attribute you want to change, and the value of the attribute. The listener would then find the modal component and update the attribute value.

$emit('updateModalAttribute', 'modal-test-one','closeOnEscape', true)

You would then have to implement some logic in your modal component class around when to fire this event.

I guess you could go further by adding a method in the ModalComponent.php class

protected final function updateModalAttribute($attribute, $value)
{
    $this->emit('updateModalAttribute', self::getName(), $attribute, $value);
}

You could then call the following in your class that extends ModalComponent

$this->updateModalAttribute('closeModalOnEscape', true)

to update the property

I'll try and submit a PR when I get time.

[seabasss]

Thanks, that would be amazing! :)

[seabasss]

I don't think this is possible. The closeModalOnEscape is handled by alpine. A 'modal attribute' is set for the component (from a static method call) when the new livewire modal component class is created. When the escape button is pressed an alpinejs method is called that reads the value of this modal attribute to decide whether to close or not.

There are ways however that you could change one of these modal attributes after the class is created.

You could fire an event that the main modal class is listening to. Something like below that passes the name of the component, the attribute you want to change, and the value of the attribute. The listener would then find the modal component and update the attribute value.

$emit('updateModalAttribute', 'modal-test-one','closeOnEscape', true)

You would then have to implement some logic in your modal component class around when to fire this event.

I guess you could go further by adding a method in the ModalComponent.php class

protected final function updateModalAttribute($attribute, $value)
{
    $this->emit('updateModalAttribute', self::getName(), $attribute, $value);
}

You could then call the following in your class that extends ModalComponent

$this->updateModalAttribute('closeModalOnEscape', true)

to update the property

I'll try and submit a PR when I get time.

Did you ever get a chance to try this out? Thank you! :)

[seabasss]

I don't think this is possible. The closeModalOnEscape is handled by alpine. A 'modal attribute' is set for the component (from a static method call) when the new livewire modal component class is created. When the escape button is pressed an alpinejs method is called that reads the value of this modal attribute to decide whether to close or not.

There are ways however that you could change one of these modal attributes after the class is created.

You could fire an event that the main modal class is listening to. Something like below that passes the name of the component, the attribute you want to change, and the value of the attribute. The listener would then find the modal component and update the attribute value.

$emit('updateModalAttribute', 'modal-test-one','closeOnEscape', true)

You would then have to implement some logic in your modal component class around when to fire this event.

I guess you could go further by adding a method in the ModalComponent.php class

protected final function updateModalAttribute($attribute, $value)
{
    $this->emit('updateModalAttribute', self::getName(), $attribute, $value);
}

You could then call the following in your class that extends ModalComponent

$this->updateModalAttribute('closeModalOnEscape', true)

to update the property

I'll try and submit a PR when I get time.

Checking in on this. Thank you!