Skip to content

Conversation

@rhysburnie
Copy link
Contributor

@rhysburnie rhysburnie commented Jul 8, 2022

In rare cases it's possible to trigger handleInput via the watch of members from a node external to the one wrapped by the At instance.

The happened in the following scenario:

  • We have a rendered "mention" in a message thread
  • Clicking it does several things one of which results in triggering an update to a data item which happens to also be in the At members pool.
  • The watch of members kicks in
  • the range in handleInput get created but its commonAncestorContainer is the text node belonging to the link in the message thread, completely external to the At instance
  • Because the text value of the link includes @ ie. it is a display of a mention the mention detection based on the range kicks in
  • This results in the At instance matching valid results and displaying the panel even tho no input was actually entered in the input wrapped by the At
  • in addition to this if you click an item in the mentions panel it will insert into the external link node (this somewhat is unimportant because all that need to be fixed it the root cause)

To resolve this issue the following logic was added

  • After the range is created, recursively walk the node tree from range.commonAncestorContainer to check it is inside of the At instances this.$el if it isn't exit the rest of the handleInput function
  • This only occurs if keep is true which is currently only set in the watch as thats the only time it needs to happen

In theory this could happen at any time an update to members occurs and the range gets creating from a node external to the one the instance is wrapping and happens to have a sting containing a mention like pattern.

In rare cases it's possible to trigger `handleInput` via the watch of `members` from a node external to the one wrapped by the `At` instance.

The happened in the following scenario:

- We have a rendered "mention" in a message thread
- Clicking it does several things one of which results in triggering an update to a data item which happens to also be in the `At` `members` pool.
- The watch of `members` kicks in
- the `range` in `handleInput` get created but its `commonAncestorContainer` is the text node belonging to the link in the message thread, completely external to the `At` instance
- Because the text value of the link includes `@` ie. it is a display of a mention the mention detection based on the range kicks in
- This results in the `At` instance matching valid results and displaying the panel even tho no input was actually entered in the input wrapped by the `At`

To resolve this issue the following logic was added

- After the range is created, recursively walk the node tree from `range.commonAncestorContainer` to check it is inside of the `At` instances `this.$el` if it isn't exit the rest of the `handleInput` function
- This only occurs if `keep` is true which is currently only set in the watch as thats the only time it needs to happen
@fritx fritx self-assigned this Jul 20, 2022
@rhysburnie rhysburnie mentioned this pull request Jul 20, 2023
@fritx fritx changed the base branch from dev to main July 23, 2025 08:25
@fritx fritx merged commit 77f33c4 into fritx:main Jul 23, 2025
@fritx
Copy link
Owner

fritx commented Jul 23, 2025

Sorry for the late response... merged now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants