Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

phx-click-away JS error when target no longer exists #2124

Open
bigardone opened this issue Aug 9, 2022 · 0 comments
Open

phx-click-away JS error when target no longer exists #2124

bigardone opened this issue Aug 9, 2022 · 0 comments

Comments

@bigardone
Copy link

bigardone commented Aug 9, 2022

Environment

  • Elixir version (elixir -v): Elixir 1.14.0-rc.0
  • Phoenix version (mix deps): 1.6.11
  • Phoenix LiveView version (mix deps): 0.17.11
  • Operating system: macOS Monterey
  • Browsers you attempted to reproduce this bug on (the more the merrier): Chrome
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

👋🏼 I have a sliding panel component with an embedded live view and a form containing an autocomplete component. The autocomplete component has a phx-click-away binding that pushes an event to empty the options list, removing them. If I type anything in this component, it shows the matching options as expected, and if I click anywhere inside the panel, it hides them. However, the sidepanel has a semi-transparent overlay that patches the view, removing it if you click on it. In this case, it throws the following error in the browser:

image

It's trying to push the event to the component, but since clicking on the panel's overlay removes it from the DOM, the event's target no longer exists. Moreover, if there are other live components on the parent live view, like a table of items in which each row is a live component, the phx-click-away gets intercepted by the corresponding index component, throwing the following error:

MyAppWeb.ItemsLive.RowLive.handle_event("reset_results", ...

Expected behavior

phx-click-away events should check if the target exists before pushing the event, or somehow scope the target index/id to the rendering live view. Does it make any sense?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant