x-ref not working without reason? #4341

simonferndriger · 2024-08-16T18:20:57Z

simonferndriger
Aug 16, 2024

I really love AlpineJS, but things like this really bring me over the edge sometimes. I have the very similar two buttons that actually are siblings (so same hierarchy):

<button class="big primary" :class="{ active: search.active }" @click="window.scrollTo(0,0); search.active = !search.active" title="Suchen [ S ]" x-ref="search"> <img alt="🔍" src="images/icons/white/search.svg"> </button>

<button class="icon" :class="{ active: showUserFlicks }" @click="jumpTo('flicks'); account.connected ? showUserFlicks = !showUserFlicks : login()" title="Meine Filme & Serien [ M ]" x-data="tmdb" x-ref="myflicks"> <img alt="👤" class="icon" src="images/icons/account.svg" x-show="!showUserFlicks"> <img alt="👤" class="icon" src="images/icons/primary/account.svg" x-cloak x-show="showUserFlicks"> </button>

The x-ref for search works, while the x-ref for myflicks doesn't, appears without reason? They are being called within the very same function:

  //-----------------------------------------
  ['@keyup']($event){
  //-----------------------------------------
    if(['INPUT', 'TEXTAREA'].includes($event.target.nodeName))
      return;

    switch($event.key){
      //---
      case 'Escape':
      //---
        this.addRoute();
        this.search.inspectFlick = null;
        this.search.active = false;
        break;

      //---
      case 'm':
      //---
      console.warn('m', this.$refs.myflicks, this.$refs.search)
        this.$refs.myflicks?.click();
        break;

      //---
      case 's':
      //---
        this.$refs.search?.click();
        break;
    }

Answered by SimoTod

Aug 16, 2024

By design, a parent component cannot see scope variables and references defined in a child component (the other direction works). You can see in the xref source code why.

View full answer

simonferndriger · 2024-08-16T18:22:15Z

simonferndriger
Aug 16, 2024
Author

And this is the output of the console.warn()

m undefined <button class="big primary" :class="{ active: search.active }" @click="window.scrollTo(0,0); search.active = !search.active" title="Suchen [ S ]" x-ref="search"> <img alt="🔍" src="images/icons/white/search.svg"> </button>

2 replies

simonferndriger Aug 16, 2024
Author

The "funny" thing is, it works, when I leave out the x-data="tmdb" - but it should work this way, right?

SimoTod Aug 16, 2024
Collaborator

By design, a parent component cannot see scope variables and references defined in a child component (the other direction works). You can see in the xref source code why.

Answer selected by simonferndriger

simonferndriger · 2024-08-16T18:53:43Z

simonferndriger
Aug 16, 2024
Author

OK, I see, thanks. Sorry, I think I knew this sometime ago... So, when I put a label around the button without making it a component, it works. Thanks.

3 replies

SimoTod Aug 16, 2024
Collaborator

No worries, you can probably avoid using x-ref. In general, if you are reaching for x-ref, it's a good time to stop a minute and see if you really need it.

Like in your example, you don't really want to click on a button, you want to run the same code which happens to also be triggered by a click.

What you can do is to extract the code in s component function (parent component) and then call that function on both the click handler and the other piece of code

simonferndriger Aug 16, 2024
Author

Thanks, I will look into that. However, what I like about AlpineJS is that code is so easy to find because it's where it's used/shown within the perfect context. For sure, I use abstractions/components for bigger things, but sometimes it's nice to just have small things right where they belong.

simonferndriger Aug 16, 2024
Author

PS: I'm also running out of parent containers for meta components 😅 I'm using <html> for global things and window events, <body> for my router component , the <header> for notifications and then it already trickles down the different paths of the web app... And if I pack everything into <html> it will get overpopulated...

ekwoka · 2024-08-17T17:31:18Z

ekwoka
Aug 17, 2024

Generally using x-ref is a code smell.

You can get something more like what you might want using just like x-init="registerThing($el)" or whatever. Not sure exactly what you want it to be though.

8 replies

SimoTod Aug 17, 2024
Collaborator

But is it really untangled? The logic you want to trigger is on the button. Put a keypress m with the document or window modifier on the button and trigger the same code. Or if you want to do it only for some parts of your page, use a custom event and fire that event on keypress where you need from other components.

There are several options, likely cleaner than using x-ref and fake a user click

simonferndriger Aug 18, 2024
Author

All good arguments, but:

When I decentralize keyboard shortcuts, and put it directly on the button, I don't have an overview anymore on which key has been used/is free. Also, I would have to declare it twice on the button, once for the click and once for the keyup, since you can't combine bindings to my knowledge (which is redundant - and I want to avoid that) - sure, I could externalize it in a global function or component, but that would just be an overhead.

With a custom event it would work, but I would still have the redunancy issue. However, faking a click for a keyboard shortcut doesn't seem like the oddest thing to do for me, since this is (from a user perspective) exactly what a keyboard shortcut means: you want to click a button, but don't have to (because it's clicked for you). Or what is it, that makes you think about it as dirty code?

An additional side benefit from this practice is actually, that the according button get's a focus, which indicates the user what happened (for example in case the shortcut was applied involuntarely).

The only drawback for me currently is, that I have to watch out, that no other component is being used in the hierarchy between the button and the router, since this would break the x-ref...

ekwoka Aug 18, 2024

🤔 Hmm, yes, I see how that might make sense.

I feel like whether you are concerned about "which keys are already in use" and "which buttons exist" though is still a kind of cross dependency. You can't actually know both of those.

Damnit, now you're making me want to work on the command palette plugin I've had bouncing around my head....

SimoTod Aug 18, 2024
Collaborator

All good arguments, but:

When I decentralize keyboard shortcuts, and put it directly on the button, I don't have an overview anymore on which key has been used/is free. Also, I would have to declare it twice on the button, once for the click and once for the keyup, since you can't combine bindings to my knowledge (which is redundant - and I want to avoid that) - sure, I could externalize it in a global function or component, but that would just be an overhead.

With a custom event it would work, but I would still have the redunancy issue. However, faking a click for a keyboard shortcut doesn't seem like the oddest thing to do for me, since this is (from a user perspective) exactly what a keyboard shortcut means: you want to click a button, but don't have to (because it's clicked for you). Or what is it, that makes you think about it as dirty code?

An additional side benefit from this practice is actually, that the according button get's a focus, which indicates the user what happened (for example in case the shortcut was applied involuntarely).

The only drawback for me currently is, that I have to watch out, that no other component is being used in the hierarchy between the button and the router, since this would break the x-ref...

No worries, it's whatever works for you at the end of the day, I'm usually wary of x-ref but if you are cool with that, that's the important bit since you'll be the one maintaining the code 👍

ekwoka Aug 19, 2024

Yup, x-ref exists because it can be quite necessary for some kinds of things, and is quite painless to include in the core as a basic behavior.

It's just kind of a code-smell. That it probably should be done differently.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

x-ref not working without reason? #4341

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 13 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

x-ref not working without reason? #4341

simonferndriger Aug 16, 2024

Replies: 3 comments · 13 replies

simonferndriger Aug 16, 2024 Author

simonferndriger Aug 16, 2024 Author

SimoTod Aug 16, 2024 Collaborator

simonferndriger Aug 16, 2024 Author

SimoTod Aug 16, 2024 Collaborator

simonferndriger Aug 16, 2024 Author

simonferndriger Aug 16, 2024 Author

ekwoka Aug 17, 2024

SimoTod Aug 17, 2024 Collaborator

simonferndriger Aug 18, 2024 Author

ekwoka Aug 18, 2024

SimoTod Aug 18, 2024 Collaborator

ekwoka Aug 19, 2024

simonferndriger
Aug 16, 2024

Replies: 3 comments 13 replies

simonferndriger
Aug 16, 2024
Author

simonferndriger Aug 16, 2024
Author

SimoTod Aug 16, 2024
Collaborator

simonferndriger
Aug 16, 2024
Author

SimoTod Aug 16, 2024
Collaborator

simonferndriger Aug 16, 2024
Author

simonferndriger Aug 16, 2024
Author

ekwoka
Aug 17, 2024

SimoTod Aug 17, 2024
Collaborator

simonferndriger Aug 18, 2024
Author

SimoTod Aug 18, 2024
Collaborator