Issue with picker when selecting data bindings

patrick · October 9, 2025, 11:22am

It is a bug is in tagify, we trying to find a solution for it. If we or the author finds a fix we will update it immediately within Wappler.

github.com/yairEO/tagify

Adding tags in mix mode causes infinite loop

opened 08:56AM - 07 Aug 25 UTC

dmx-patrick

## Prerequisites - [x] I am running the latest version - [x] I checked the docu…mentation and found no answer - [x] I checked to make sure that this issue has not already been filed ### 💥 Demo Page https://jsbin.com/libuxiyomo/2/edit?html,js,console,output ### Explanation There are several problems with the use of document fragment in addMixTags method. I already did most of the debugging and know what exactly goes wrong but don't have a solution for it yet. The demo page does not show the infinite loop but only the first problem which finally causes the infinite loop. #### Cause of the problem After the fragment is inserted into the DOM the fragment becomes empty. The code still uses the fragment after it was inserted which causes several problems. #### First problem: selection not correctly set and warning in console With existing selection it calls the method `injectAtCaret` which insert the fragment in the DOM and after that it calls `setRangeAtStartEnd` with the document fragment as `node` argument. The fragment is at this moment empty causing an error which is inside a try/catch and shows the error `IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.` in the console. The error is with the `setEnd`, the `setStart` didn't throw an error but due to the empty fragment being passed as parameter it caused the selection being unset causing the error in the second loop with `setEnd`. #### Second problem: invinite loop Due to the above error you now have an unset selection with no range, while the instance `state.selection` still holds a valid selection. I'm not sure when it happens but in our case the `state.selection` was updated with an invalid selection, the object became: ```js { anchorOffset: 0, anchorNode: null, range: 0 } ``` With this corrupted state we do get an infinite loop where the methods `injectAtCaret` and `appendMixTags` repeatedly calling each other causing a `Maximum call stack size exceeded` error. #### Screenshots of the errors <img width="591" height="103" alt="Image" src="https://github.com/user-attachments/assets/849c633d-9b43-4a72-9caf-d3decc72cf8b" /> <img width="448" height="447" alt="Image" src="https://github.com/user-attachments/assets/bb699a55-1d76-4ad9-a828-7238155f5112" />