Merge pull request #2715 from teamleadercrm/tab-group-scrolling-fix

[FIX] - Use Ref instead of a constant

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [22.2.1] - 2023-07-13
+
+### Fixed
+
+`TabGroup`: Use ref.current instead of constant. ([@eniskraasniqi1](https://https://github.com/eniskraasniqi1) in [#2715](https://github.com/teamleadercrm/ui/pull/2715))
+
 ## [22.2.0] - 2023-07-11
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "22.2.0",
+  "version": "22.2.1",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/tab/TabGroup.tsx

@@ -25,11 +25,9 @@ const TabGroup: GenericComponent<TabGroupProps> = ({ children, className, size,
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
 
-  const scrollContainerElement = scrollContainerRef.current;
-
   const checkForScrollPosition = () => {
-    if (scrollContainerElement) {
-      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerElement;
+    if (scrollContainerRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
 
       setCanScrollLeft(scrollLeft > 0);
       setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
@@ -39,7 +37,7 @@ const TabGroup: GenericComponent<TabGroupProps> = ({ children, className, size,
   const scrollToActiveTab = () => {
     if (activeTabRef.current) {
       const { offsetLeft } = activeTabRef.current;
-      scrollContainerElement?.scrollTo({ left: offsetLeft - SCROLL_BUTTON_WIDTH });
+      scrollContainerRef.current?.scrollTo({ left: offsetLeft - SCROLL_BUTTON_WIDTH });
     }
   };
   const handleResize = () => {
@@ -52,13 +50,14 @@ const TabGroup: GenericComponent<TabGroupProps> = ({ children, className, size,
   };
 
   const scrollContainerBy = (distance: number) => {
-    scrollContainerElement?.scrollBy({ left: distance, behavior: 'smooth' });
+    scrollContainerRef.current?.scrollBy({ left: distance, behavior: 'smooth' });
   };
 
   useEffect(() => {
     smoothScroll.polyfill();
-    scrollContainerElement?.addEventListener('scroll', handleScroll);
-    return () => scrollContainerElement?.removeEventListener('scroll', handleScroll);
+    scrollContainerRef.current?.addEventListener('scroll', handleScroll);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return () => scrollContainerRef.current?.removeEventListener('scroll', handleScroll);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/components/wysiwygEditor/WysiwygEditor.tsx

@@ -107,7 +107,6 @@ const WysiwygEditor: GenericComponent<WysiwygEditorProps> = ({
   const [isFocused, setIsFocused] = useState(false);
   const [isPlaceholderShown, setIsPlaceholderShown] = useState(true);
   const editorRef = useRef<EditorType>(null);
-  const editorElement = editorRef.current;
 
   useEffect(() => {
     if (autoFocus) {
@@ -116,19 +115,20 @@ const WysiwygEditor: GenericComponent<WysiwygEditorProps> = ({
   }, [autoFocus]);
 
   useEffect(() => {
-    if (!onKeyDown || !editorElement?.wrapper) {
+    if (!onKeyDown || !editorRef.current?.wrapper) {
       return;
     }
 
     const handleKeyDown = (event: React.KeyboardEvent) => onKeyDown(event);
 
-    editorElement.wrapper.addEventListener('keydown', handleKeyDown);
+    editorRef.current.wrapper.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      if (!onKeyDown || !editorElement?.wrapper) {
+      if (!onKeyDown || !editorRef.current?.wrapper) {
         return;
       }
-      editorElement.wrapper.removeEventListener('keydown', handleKeyDown);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      editorRef.current.wrapper.removeEventListener('keydown', handleKeyDown);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);