Why opening bootstrap modal using wire:click and dispatch event Blocks Scrolling in admin menu - laravel

Question

I have a problem when I use the following code for adding and displaying:
<a href="javascript:void(0)" data-toggle="modal" data-target="#modalYear">
<span class="sub-item">Add year</span>
</a>
<a href="javascript:void(0)" data-toggle="modal" data-target="#ListYear">
<span class="sub-item">Listyear</span>
</a>
Nothing gets blocked but the problem comes when I want to use the edit option the admin menu stops scrolling, this is where the problem starts and also when I use this :
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
span class="sub-item">Add Year</span>
</a>
the modal will show up but when I close it the admin menu stops scrolling.
After so many tries I figured out that the problem is using wire:click to call the modal for adding, editing and displaying.
this is my component:
public function ShowReportModal($action)
{
if($action == 'add')
{
$this->dispatchBrowserEvent('ModalYearVisible') ;
}
else{
$this->dispatchBrowserEvent('ModalListVisible') ;
}
}
Here is the admin menu code:
<li class="nav-item">
<a data-toggle="collapse" href="#annee">
<i class="far fa-calendar-alt"></i>
<p>Scholar year</p>
<span class="caret"></span>
</a>
<div class="collapse" id="annee">
<ul class="nav nav-collapse">
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
<span class="sub-item">Add year</span>
</a>
</a>
</li>
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('list')">
<span class="sub-item">Years List</span>
</a>
</li>
</ul>
</div>
</li>
Any help would be appreciated and also why is this happening?