Клавиша выхода в Livewire

Давайте теперь откроем панель поста. Закрыть её можно только кнопкой, а клавиша выхода ничего не делает, хотя человек ждёт привычного жеста.

Модификатор .escape у wire:keydown на корне компонента ловит Escape и вызывает метод закрытия, пока фокус где угодно внутри блока.

Страница откроется по адресу /posts/panel. Давайте опишем компонент PostPanel:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostPanel extends Component
	{
		public $closed = '';
		
		public function close()
		{
			$this->closed = 'Closed';
		}
		
		public function render()
		{
			return view('livewire.post-panel');
		}
	}
?>

Давайте повесим keydown с escape на корень и выведем свойство:

<div wire:keydown.escape="close">
	Panel
	<div>{{ $closed }}</div>
</div>

Давайте откроем страницу по адресу /posts/panel:

<?php
	Route::get('/posts/panel', function () {
		return view('posts-panel');
	});
?>

Давайте вставим компонент на страницу:

<x-layout>
	<livewire:post-panel />
</x-layout>

Создайте компонент EmployeePanel. Клавиша выхода закрывает панель работника.