fix(many): fix "not a valid selector" exception when an option ID contains quotes

The issue is that we are letting users choose any string as an ID, and the querySelector method only
accepts CSS safe IDs. Luckily there is a built in method to escape stuff that it does not like

Fixes INSTUI-4570

Author: matyasf

packages/ui-drilldown/src/Drilldown/index.tsx

@@ -1516,7 +1516,9 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             : this.currentPage.children[0]?.props.id
 
           if (!targetId) return null
-          return this._popover?._contentElement?.querySelector(`#${targetId}`)
+          return this._popover?._contentElement?.querySelector(
+            `#${CSS.escape(targetId)}`
+          )
         }}
         elementRef={(element) => {
           // setting ref for "Popover" version, the popover root

packages/ui-select/src/Select/index.tsx

@@ -291,22 +291,21 @@ class Select extends Component<SelectProps> {
   }
 
   scrollToOption(id?: string) {
-    if (this._listView) {
-      const option = this._listView.querySelector(`[id="${id}"]`)
-      if (!option) return
-
-      const listItem = option.parentNode
-      const parentTop = getBoundingClientRect(this._listView).top
-      const elemTop = getBoundingClientRect(listItem).top
-      const parentBottom = parentTop + this._listView.clientHeight
-      const elemBottom =
-        elemTop + (listItem ? (listItem as Element).clientHeight : 0)
-
-      if (elemBottom > parentBottom) {
-        this._listView.scrollTop += elemBottom - parentBottom
-      } else if (elemTop < parentTop) {
-        this._listView.scrollTop -= parentTop - elemTop
-      }
+    if (!this._listView || !id) return
+    const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`)
+    if (!option) return
+
+    const listItem = option.parentNode
+    const parentTop = getBoundingClientRect(this._listView).top
+    const elemTop = getBoundingClientRect(listItem).top
+    const parentBottom = parentTop + this._listView.clientHeight
+    const elemBottom =
+      elemTop + (listItem ? (listItem as Element).clientHeight : 0)
+
+    if (elemBottom > parentBottom) {
+      this._listView.scrollTop += elemBottom - parentBottom
+    } else if (elemTop < parentTop) {
+      this._listView.scrollTop -= parentTop - elemTop
     }
   }
 

packages/ui-tabs/src/Tabs/index.tsx

@@ -331,10 +331,12 @@ class Tabs extends Component<TabsProps, TabsState> {
     // this is needed because keypress cancels scrolling. So we have to trigger the scrolling
     // one "tick" later than the keypress
     setTimeout(() => {
-      this.state.withTabListOverflow &&
-        this.showActiveTabIfOverlayed(
-          this._tabList!.querySelector(`#tab-${id}`)
-        )
+      if (this.state.withTabListOverflow) {
+        const tab = id
+          ? this._tabList!.querySelector(`#tab-${CSS.escape(id)}`)
+          : null
+        this.showActiveTabIfOverlayed(tab)
+      }
     }, 0)
   }
 

packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx

@@ -310,7 +310,7 @@ class TopNavBarSmallViewportLayout extends Component<
     setTimeout(() => {
       const container = document.getElementById(this._trayContainerId)
       const firstOption = container?.querySelector(
-        `[id="${targetId}"]`
+        `[id="${CSS.escape(targetId)}"]`
       ) as HTMLSpanElement
       firstOption?.focus()
       if (this._drilldownRef) {