Glitches in my Livewire v3 components

The keydown.escape to $parent stops working; Toggling button of an open Auth form closes it but displays wire:id.

The structure is AuthDiv => AuthWide => Login / Register. (I haven’t even tried in mobile yet).

I have transitioned my login and register form components, and their parent AuthWide and grandparent AuthDiv components, all to Livewire 3. The parent component contains the 2 buttons that open login and register forms. This is the livewire directive(?) I’ve located in the form components' wrapping div. (I have also tried it inside the form tags with same results.) The classes have the requisite properties.

    public bool $loginModalState = false;
    public bool $registerModalState = false;

And this is the directive:

wire:keydown.escape="$parent.escapeCancel" 

It triggers this method in the parent AuthWide component:

public function escapeCancel()   {
    $this->loginModalState = false;
    $this->registerModalState = false;
} 

And it works fine until this other component method conflicts. The conflicting code: Both forms also have buttons with the common auth prompts (“Already a user?” and “Need to register?”) to let the user switch forms if they have opened the wrong one:

wire:click="$parent.showLoginForm" 
wire:click="$parent.showRegisterForm"

These are buttons (tried both submit and button types) within the wrapping div. They work great.

The escape BEHAVIOR: the $parent.escapeCancel works every time – unless at some point I switch forms by clicking one of those prompts/buttons. Then escape does nothing; the open form remains open. However, if I click the button for the form that is not open i.e. the “Login” button if register is open (not the switch button), it closes the current form and opens the other and THEN escapeCancel() works again. Seems like the state is refreshed?

I hope this is all clear so far.

What else I’ve tried

A gazillion permutations.

Calling wire:keydown.escape="escapeCancel" from each form to a method on the forms’ own component classes.

Calling from parent AuthWide to a method on its own component class.

Calling from grandparent AuthDiv to a method on its component class.

Dispatching as an event ($this->dispatch('escapeCancel'); with a #[On(‘escapeCancel’)] attribute on the parent AuthWide method. And then on the grandparent method.

Calling from parent AuthWide up to the grandparent AuthDiv. (Where should the keydown be located?).

Parens on the directive method name: wire:keydown.escape="$parent.escapeCancel()" Do I need them?

Locating the escapeCancel directive inside the form tag instead of the wrapping div. Same behavior.

Nothing works, they still don’t cancel form after having switched forms.

I have checked Network activity in devtools, but I don’t see anything that gives me a clue. Full disclosure: I really don’t understand much about the network data or know where to look.

So what happens behind the scenes when I switch forms? Does it somehow disable my cancel method? Is there some change of state? Or does it recognize a different parent?

The other glitch comes when I click the button for a form that is already open, i.e. clicking “Login” button twice. The form closes and under the button it displays:

“wire:id=…(some id)”

Any ideas greatly appreciated.