Selector ID using querySelector not supported

[PabloAballe]

Describe the bug 📝

Good morning, below I describe the context and the error I found:

Context

I was following the following tutorial https://docs.thatopen.com/Tutorials/FragmentCacher to add the save and download functionality to my application and I have seen that when trying to save the model I get an error in the console. The error is the following:

The error line is this one:

 getInnerElement(id) {
    return this.get().querySelector(`#${id}-${this.id}`);
  }

The relevant code I am using is the following:

private __createMoreOptionsToolbar(): Toolbar {
  const moreOptionsToolbar = new Toolbar(
	  this.__goIFCComponents.getLoader().getComponents(),
	  {
		  name: "More Options Toolbar",
		  position: "bottom",
	  }
  );
  this.__goIFCComponents
	  .getLoader()
	  .getComponents()
	  .ui.addToolbar(moreOptionsToolbar);
  
  const catcherButtons = this.__goIFCComponents
	  .getLoader()
	  .getCatcher()
	  .uiElement.get("main");
  
  moreOptionsToolbar.addChild(catcherButtons);
  
  return moreOptionsToolbar;
 } 

I leave the information about the versions I am using below:

{ 
"openbim-components": "1.2.0",
"three": "0.152.2",
"three-mesh-bvh": "0.6.7",
"web-ifc": "0.0.46",
"web-ifc-viewer": "1.0.218",
"bim-fragment": "1.0.25",
 }

Thank you so much

Reproduction ▶️

No response

Steps to reproduce 🔢

To reproduce the error you must follow the tutorial and click on the save button once the UI is added

System Info 💻

ystem:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 3.74 GB / 15.69 GB
  Binaries:
    Node: 18.9.0 - ~\.nvm\versions\node\v18.9.0\bin\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.1 - ~\.nvm\versions\node\v18.9.0\bin\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.2134.0), Chromium (120.0.2210.77)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    openbim-components: 1.2.0 => 1.2.0

Used Package Manager 📦

npm

Error Trace/Logs 📃

Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'Element': '#title-3QLrPSlOT1ZxGY$CQAbbH_' is not a valid selector.
at SimpleUICard.getInnerElement (http://localhost:3000/node_modules/.vite/deps/openbim-components.js?v=b108afaf:29788:23)
at new SimpleUICard (http://localhost:3000/node_modules/.vite/deps/openbim-components.js?v=b108afaf:30410:19)
at _FragmentCacher.onSaveButtonClicked (http://localhost:3000/node_modules/.vite/deps/openbim-components.js?v=b108afaf:53356:20)
at http://localhost:3000/node_modules/.vite/deps/openbim-components.js?v=b108afaf:53254:39
at Event.trigger (http://localhost:3000/node_modules/.vite/deps/openbim-components.js?v=b108afaf:23958:15)
at domElement.onclick (http://localhost:3000/node_modules/.vite/deps/openbim-components.js?v=b108afaf:29972:26)

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

[HoyosJuan]

Hey @PabloAballe! Thanks for reporting this. I've already solved it in PR #228.

For the note, the problem was that the SimpleUICard component was taking the ID from the IFC model. The ID of the model could contain special characters, such as $. However, it seems you can't use the query selector with HTML IDs that contains dollar signs (and who knows which other special characters).

Please, keep in mind you need to wait until we publish a path to the current minor version. Probably we will do it in a couple of days.

[PabloAballe]

Hello @HoyosJuan , thanks to you for the magnificent work you have done.

I didn't know that querySelectors couldn't contain special characters either, good to know.

Thanks for solving it so quickly!!

I will wait for the new release.

Have a nice day and thanks again