In PETAL stack app: Alpine.js x-on:focus event stops working in production

Phoenix Forum Questions / Help
, , ,
1

I have a PETAL stack application on Phoenix 1.6.0-rc0 (using esbuild) with a search input box that has x-on:focus="$el.select()" on it to select the whole input when it gets focus. It works fine in development and just…doesn’t trigger at all in production on Heroku. Other Alpine.js features on other parts of the page are working fine in both development and production.

I’ve tried adding console logs to the x-on:focus and they don’t get triggered. I’ve tried adding phx-update="ignore" and an id to see if LiveView was interfering somehow, same result. I’ve tried adding a setTimeout with 100 ms delay to see if it was a timing issue, same result.

I’m not sure how to try to track it down any further, so has anyone else seen any similar behavior or have any ideas as to what may be happening?

2

Probably a pretty special case, but in case anyone else sees something similar and stumbles across this. In my case, I was running an older version of Alpine on Heroku without realizing it. I needed to clear my Heroku app cache to get Alpine to be on version 3 in production.

1 Like