V3 x-show doesn't evaluate properly off xref values

[AdamSCMM]

The following code snippet was working in V2, but in V3 seems to do nothing and I am unsure why

If you type anything into the input other than 'en' the text should display, instead the text never shows up at all

  <input x-ref="inputname" />
  <div x-cloak x-show="$refs.inputname.value && $refs.inputname.value !== 'en'" >
      This doesn't show properly
  </div>

Here's a codepen showing it in action:
https://codepen.io/acxz/pen/rNmVpaN?editors=1010

Any support would be appreciated

[danddanddand]

Your code doesn't really make sense because inputname.value isn't reactive so there is no way for alpine to track it. Maybe use x-model on the input instead? https://codepen.io/danddanddand/pen/mdmJNNz

[AdamSCMM]

Thank you, I will switch to using xmodel for this usage

It's worth noting this code was working properly in V2 and has been in production for weeks, it only started failing in v3

[KevinBatdorf]

I would expect Alpine to evaluate $refs.inputname then access the value property, so I think this should work. x-model is the better approach for this specific example, but maybe not for others.

In V2 Alpine would always fetch the ref from the dom on demand so it would work.

I'd expect the stored reference to be able to access the properties dynamically as well. I think there's room for improvement in Alpine here. I haven't looked into how this part of Alpine works though.

edit: I realize the input in the example isn't triggering a re-render, but I mean under the situation that it were (ie. add x-model with the x-ref)

Ideally it would work like it did in V2 if possible :)

[KevinBatdorf]

Here's a plugin for the v2 style $refs, where you would use like $v2refs.something.value

Alpine.magic('v2refs', (el, { Alpine: { closestRoot } }) => {
  const root = closestRoot(el)
  return new Proxy({}, {
    get(_, prop) {
      return root.querySelector(`[x-ref=${prop}]`)
    }
  })
})

Demo: https://codepen.io/KevinBatdorf/pen/VwbvZBR?editors=1010

[danddanddand]

Hi @KevinBatdorf. Doesn't this suffer same root issue of not having element be reactive or am I missing something? For example https://codepen.io/danddanddand/pen/gOWaOWw

[KevinBatdorf]

You need to at least update the component's state somehow. Alpine won't re-render otherwise.

[KevinBatdorf]

I see why you asked that though now @danddanddand. In V2 it would evaluate x-show each render which would reach into the dom and find the x-ref value when being invoked. I don't think V3 does that

I'm not even sure it works in an input like the original question actually. Let me see if I can improve on the plugin

[KevinBatdorf]

I think you actually can't use dynamic values inside x-show because it saves the expression to be evaluated later. So it won't work regardless.

https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-show.js#L7

You'd have to write your own version of x-show or use x-effect I think.

[KevinBatdorf]

I updated the demo a bit for another common x-ref issue, where people are looking for :x-ref="", which is useful I guess when using x-for, but yeah I don't think there's a way to get it going in x-show unless that code is changed to evaluate on demand (which may even be intentionally set up not to do)