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!

[lucadegasperi]

Hello, has there been any progress on this? I'm currently facing an issue with a third party select component being embedded inside a wire-elements modal. The issue is that clicking outside the open select will close the modal as well, and not just the select component.
Being able to tell the modal that it should not close when the select is closed would be a huge. The select already exposes an open and close event. What's missing is how I can programmatically tell the modal to not close when clicking outside the open select or press esc. Bonus points if the behaviour could be controlled dynamically by php as well.