1. Home
  2. Forum
  3. Angular - EJ 2
  4. An error occurs while using the "listBox" component.

An error occurs while using the "listBox" component.

Hello!
These errors are output to the Chrome console.

message : "ERROR SyntaxError: Failed to execute 'querySelector' on 'Element':'[]' is not a valid selector."

function name : "ListBox.prototype.setSelection = function (values, isSelect, isText)"

code : "li = _this.list.querySelector('[data-value="' + text.replace(/"/g, '\\"') + '"]');"

I think it's a new line in the parameter text in the querySelector, "\n""I think there's a problem going in.

angular : 17.1.2
syncfusion : 24.2.4



5 Replies
YA YuvanShankar Arunagiri Syncfusion Team March 14, 2025 06:23 AM UTC

Hi Leprintemps,


We have validated your reported query with Listbox and the specific version. But we are unable to reproduce the issue on our end. Refer to the below sample link.


Sample link: https://stackblitz.com/edit/angular-zzrsmdyz?file=package.json


If you are still facing the issue, kindly share the issue-replicating sample or replicate the issue in our sample with a screenshot of the error or a video demonstration. Based on that, we will check and provide the solution.


Regards,

YuvanShankar A


?? ??? replied to YuvanShankar Arunagiri March 14, 2025 06:53 AM UTC

If so, can you tell me how to put a new line in "listbox"?


YA YuvanShankar Arunagiri Syncfusion Team March 17, 2025 10:08 AM UTC

Hi Leprintemps,


We have checked your scenario with shared function name with code line and confirmed the issue as “Script error thrown while setting the values has a new line (n) in the list item text of the list box" and logged a defect report. We will include the fix for this issue in the upcoming weekly patch release scheduled for the First week of April 2025.


Feedback link: https://www.syncfusion.com/feedback/66255/script-error-thrown-while-setting-the-values-has-a-new-line-n-in-the-list-item


You will be informed regarding this once the fix is published.


Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”


Regards,

YuvanShankar A


JC John Cole April 9, 2025 05:49 AM UTC

You're right—the newline \n in text breaks querySelector. Sanitize input to remove or escape it first.











PK Priyanka Karthikeyan Syncfusion Team April 10, 2025 01:06 PM UTC

Hi Leprintemps / John Cole,

We would like to inform you that we have resolved the reported issue "Script error thrown while setting the values has a new line (n) in the list item text of the list box" in our latest version 29.1.37. Therefore, we recommend that you update your package to the latest version to resolve the current problem. 

 

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/29.1.37?type=all#listbox

 

Sample: https://stackblitz.com/edit/angular-zzrsmdyz-6ygnpgnu?file=package.json

 

Root cause: The querySelector function does not get the value based on new line char(\n) with data-value attributes in li elements.

 

Regards,

Priyanka

 


Loader.
Up arrow icon