fix(FEC-11392): document.querySelector breaks (#618)

Issue: document.querySelector doesn't work correctly when element id contains query chars. Solution: get element by id and make the query
kaltura · Jul 7, 2021 · f86a73a · f86a73a
1 parent 460c85a
commit f86a73a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/language/language.js b/src/components/language/language.js
@@ -212,7 +212,8 @@ class Language extends Component {
    * @memberof Language
    */
   renderAll(audioOptions: Array<Object>, textOptions: Array<Object>): React$Element<any> {
-    const portalSelector = `#${this.props.player.config.targetId} .overlay-portal`;
+    const targetId = document.getElementById(this.props.player.config.targetId) || document;
+    const portalSelector = `.overlay-portal`;
     return (
       <ButtonControl name={COMPONENT_NAME} ref={c => (c ? (this._controlLanguageElement = c) : undefined)}>
         <Tooltip label={this.props.buttonLabel}>
@@ -252,7 +253,7 @@ class Language extends Component {
             )}
           </SmartContainer>
         )}
-        {this.state.cvaaOverlay ? createPortal(<CVAAOverlay onClose={this.onCVAAOverlayClose} />, document.querySelector(portalSelector)) : <div />}
+        {this.state.cvaaOverlay ? createPortal(<CVAAOverlay onClose={this.onCVAAOverlayClose} />, targetId.querySelector(portalSelector)) : <div />}
       </ButtonControl>
     );
   }

diff --git a/src/components/smart-container/smart-container.js b/src/components/smart-container/smart-container.js
@@ -89,15 +89,16 @@ class SmartContainer extends Component {
    * @memberof SmartContainer
    */
   render(props: any): React$Element<any> {
-    const portalSelector = `#${this.props.targetId} .overlay-portal`;
+    const targetId = document.getElementById(this.props.targetId) || document;
+    const portalSelector = `.overlay-portal`;
     props.clearAccessibleChildren();
     return this.isPortal ? (
       createPortal(
         <Overlay open onClose={props.onClose} handleKeyDown={this.props.handleKeyDown} addAccessibleChild={this.props.addAccessibleChild}>
           <div className={style.title}>{props.title}</div>
           {this.renderChildren(props)}
         </Overlay>,
-        document.querySelector(portalSelector)
+        targetId.querySelector(portalSelector)
       )
     ) : (
       <div onKeyDown={props.handleKeyDown} tabIndex="-1" className={[style.smartContainer, style.top, style.left].join(' ')}>