From 24aaa5371263ff49273a15af6c7b3795ff1b4920 Mon Sep 17 00:00:00 2001
From: kristina-kovacikova
 <47686623+kristina-kovacikova@users.noreply.github.com>
Date: Tue, 5 Oct 2021 09:27:57 +0200
Subject: [PATCH] fix: fix issue with highlight code scrolling causing console
 error (#7497) (#7519)

Co-authored-by: Mahtis Michel <mathis.michel@outlook.de>

Refs #7497
---
 src/core/components/highlight-code.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index 414180cb94a..e192cdbbc76 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -39,6 +39,16 @@ export default class HighlightCode extends Component {
     }
   }
 
+  componentDidMount() {
+    [this.syntaxHighlighter, this.pre]
+    .map(element => element?.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
+  }
+
+  componentWillUnmount() {
+    [this.syntaxHighlighter, this.pre]
+    .map(element => element?.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
+  }
+
   render () {
     let { value, className, downloadable, getConfigs, canCopy, language } = this.props
 
@@ -48,14 +58,14 @@ export default class HighlightCode extends Component {
 
     const codeBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
+          ref={elem => this.syntaxHighlighter = elem}
           language={language}
           className={className + " microlight"}
-          onWheel={this.preventYScrollingBeyondElement}
           style={getStyle(get(config, "syntaxHighlight.theme"))}
           >
           {value}
         </SyntaxHighlighter>
-      : <pre onWheel={this.preventYScrollingBeyondElement} className={className + " microlight"}>{value}</pre>
+      : <pre ref={elem => this.pre = elem} className={className + " microlight"}>{value}</pre>
 
     return (
       <div className="highlight-code">