SohoSearchfield: Update generates new template element

[xqses]

Describe the bug
Linking to this issue. While implementing a workaround to select/deselect all categories in a searchfield, I noticed that the updated method on Soho Searchfields apparently (?) creates a new wrapper element in the template instead of updating the old one. See the screenshots below

To Reproduce
Steps to reproduce the behavior:

1. Write a template that will have a button and a category searchfield
2. Implement a method that runs on button click which calls the searchfield.updated method with new options, for example:

selectAll() { this.categories$.subscribe((cats) => { cats.map((cat) => cat.checked = true); this.searchfield.updated( {...this.searchfield.options, categories: cats) ); });
I've verified that this also happens if you just pass this.searchfield.options (and not a new object), or if you pass no new object at all.

3. Go to the page and click the button
4. Open the inspector to see the problem (new element is created).
5. (For additional verification, place breakpoints before and after you run the updated method)

Expected behavior
The updated method should update the element, not create a new element.

Version

• ids-enterprise-ng: ~10.9.0

Screenshots
Here's a step-by-step album:
https://imgur.com/a/Jz5tuD7

Platform

• OS Version: Windows 10
• Browser Name: Chrome,
• Browser Version. Version 96.0.4664.45 (Official Build) (64-bit)

Additional context
This bug isn't strictly limited to implementing a select all button outside of the category dropdown, but occurs whenever the updated method is called. Hence, it's related to the linked issue but not caused by it.

[xqses]

Hi, this still seems to be an issue.

Any idea when this might be fixed?

Thanks

[tmcconechy]

We can move it up in the backlog. But re-reading this im not sure how to tackle it. Can you maybe add a way to reproduce this using stackblitz.

https://stackblitz.com/edit/ids-quick-start-1311

Specifically steps 1,2,3 are not clear. What kind of template? Where does the code go? Which page do i run?

Usually a good issue would be..

1. Run this example
2. Follow these steps

[xqses]

Thanks for responding Tim.

Well, it's not reproducible via Stackblitz. But with essentially the same code, it's reproducible for example in this IDS repro project
The bug definitely still exists in the environment we are building (PV2). I will try to get a Github Pages going for that repo tomorrow, but you could also just fork it and run ng serve.

(In case you do, just go to the Searchfield Updated tab, open the inspector and click the update button)

[jbrcna]

QA Passed. v4.62.0-dev
https://main-enterprise.demo.design.infor.com/components/searchfield/example-update