Modal doesn't close, even though property is false

[estevanmaito]

You can reproduce it here https://codepen.io/estevanmaito/pen/PoPvbBz

If you click 'Open Modal', it opens the modal, and traps the focus inside the modal, so you can TAB indefinitely inside it. If you click outside of it, or in the close button or icon, it closes.

But, if you press ESC, it executes the function close, this.show turns to false, the cleanup is run but the modal is still visible 🤔

It's my first time using Alpine, so I may be missing something very obvious 😬

[ryangjchandler]

Hi @estevanmaito, I'm on mobile so could only give it a quick look.

You should be doing this.trapCleanup = trapFocus(...) inside of open, your current code will implicitly create a temporary variable and not actually assign the return value.

You'll also need to do this.trapCleanup() instead of just trapCleanup().

For what it's worth, you could use Alpine's x-on:keydown.esc.window edit: x-on:keydown.escape.window to run your close function too.

Let me know if that helps.

[estevanmaito]

@SimoTod I actually got it solved. It was a typo (see accepted answer). But I would like to understand what would you make simpler? The HTML part or the functions?

Talking about the trap focus function, I think it really does the job the leanest way possible, but I'm not familiar to the Alpine organization and would be very helpful to understand it.

[ryangjchandler]

Are you using the trapFocus function in multiple parts of your application? If not, I'd make it part of the component function instead.

[SimoTod]

If I understand correctly, the Alpine handler works, not the original example. What I found a bit complicated in the first snippet was that you were defining functions inside a literal object (let's ignore alpine for a sec, it's more a javascript issue), using this in it, and you were passing one of them to a different function defined in the global scope. Javascript scoping is complex, if you console log this inside the original close function in the first example, you can see that, when pressing esc, it was printing out window rather then the literal object you were expecting so your this was different.

Alpine gives you the tools to make the structure simpler encapsulating everything in a component.
Something like (I'm typing from my mobile, sorry, there could be typos):

<div x-data="{show: false}" >
   <button="open()">open</button>
   <div x-if="show" @keydown.document="handleKey($event)">
      <button="close()"></button>
   </div>
</div>
<script>
function data() {
  return {
    show: false, 
    open() {
       this.show = true, 
       // logic to focus element
    }, 
    close() {
      this.show = false
      // additional logic on close
    },
    handleKey(event) {
      // logic where you can call this.close where needed based on your event conditions 
    } 
  }
</script>

[SimoTod]

Btw, glad it's sorted. It was just an observation. If you are confortable with that structure, it's okay since it's your code.
Be aware that keydown events work a bit funny on android. I've just found it out today and I'll dig into it in the next few days but the escape modifier might not work due to android not supporting event.key (TBC). If you need to support those devices, have a go and if it does not work, you might want to use the keypress without the escape modifier and put your logic inside the handler (checking both event.key and event.which or event.keyCode like the first example).

[estevanmaito]

I see now. I've debugged it before and saw that the cleanup function was being called inside window, but totally ignored that the same was occurring with show.

On the encapsulation, it would become repetitive, as the trapFocus function would be used in other places. But I'll try it to get familiar with, as it seems definitely a clearer approach.

These were my first lines with Alpine, so I don't know if even I am comfortable with this structure 😅

[estevanmaito]

Solved. It's actually @keydown.escape.

I removed the handler from inside the function and just call close from @keydown.escape.

[ryangjchandler]

Sorry, I'm on mobile and quite busy so it was a rushed answer.

[estevanmaito]

Oh, no problems at all! I didn't even know it existed 😅

Just pointed for future reference.

[ryangjchandler]

I've marked my original reply as edited with the correct implementation too.

[estevanmaito]

I've edited mine as well.