fix(vue): unmount teleported user component

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Presenting a modal immediately after dismissing a modal, can incorrectly clear the contents of the presented modal.

Issue URL: #26542

What is the new behavior?

• Presenting a modal immediately after dismissing a modal does not clear the contents of the presented modal.
• Teleported components are removed using splice instead of filter.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.4.2-dev.11672257788.1a6cf37c

[liamdebeasi]

I don't get why this would fix the issue since these two code snippets should yield the same results:

const toRemove = '3';
let dataArray = ['1', '2', '3', '4', '5'];
dataArray = dataArray.filter(i => i !== toRemove);

console.log(dataArray);
// ['1', '2', '4', '5']

const toRemove = '3';
let dataArray = ['1', '2', '3', '4', '5'];

const index = dataArray.findIndex(i => i === toRemove);
dataArray.splice(index, 1);

console.log(dataArray);
// ['1', '2', '4', '5']

[sean-perkins]

There shouldn't be a difference in the implementations with static data, but for some reason there is a tangible difference in the outcome with our instance, where userComponents.value is being manipulated by both the new modal being presented and the previous modal being dismissed; resulting in the incorrect modal being filtered out.

I've ran the same test at least 30 times while locally debugging and it is consistent with findIndex unmounting the correct view and filter removing the presented view.

Is this some weird Vue quirk with shallow refs and rendering?

[liamdebeasi]

filter returns a new array whereas splice updates the array in-place. Maybe that causes some difference for Vue?

[liamdebeasi]

Looks good, but can we add a comment that explains why we need to use splice here?