Skip to content

Modal not really closing #167

Description

@YellowGB

Hello,

First of all, thanks for your work :)

I'm writing because I'm encountering a problem that's starting to drive me crazy, In my livewire controller, $this->closeModal(); doesn't really close the modal, it just makes it visually disappear but it's still there, on top of the page, because I can't click on anything and I can see the modal scrolling bars are still there on top of the ones from the page.

I scrolled in every direction, the modal didn't go anywhere else on the screen, it's as if there was a display:none; but the component itself wasn't deleted.

Before pressing the button that closes this modal, if I press Esc or click outside, it's closed properly, but after clicking the button I'm stucked, I have to refresh the page to be able to select elements on it again.

I don't understand what I'm doing wrong, I tried $this->forceClose()->closeModal(); and $this->closeModal(true);, $this->closeModal(false);, same result.

There is no error in logs, nothing in the javascript console.

Here's my view :

<div class="grid grid-cols-3 gap-2 justify-center items-center text-center p-4">
    @foreach ($types as $type)
        <div wire:click="$emit('ResourceTypeSelected')">{{ __('titles.type.' . $type) }}</div>
    @endforeach
</div>

And in my controller :

protected $listeners = ['ResourceTypeSelected' => 'selectResourceType'];

public function selectResourceType() {

    $this->dispatchBrowserEvent('test', []);
    $this->closeModal(false);
}

The $this->dispatchBrowserEvent('test', []); works well and triggers without problem the javascript listener on the page.

Can anyone help me ? I would really appreciate it because I'm stuck ^^

EDIT :
By simulating an Esc key press in javascript after running my selectResourceType() controller function, I noticed that the same problem happened, only when I press Esc myself the modal closes correctly. So I'm guessing the controller function somehow messes with closeModal, but why and how I have no idea.

I'm using mcamara/laravel-localization to translate routes, could that be the problem ? Because that happened with Livewire when I installed it and I had to add this to the middleware_group in config/livewire.php :

'middleware_group' => [
    'web',
    'localize',
    'localeCookieRedirect',
    'localizationRedirect',
    'localeViewPath',
],

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions