Merge pull request #2422 from teamleadercrm/bugfix/selects-blocking

🐛 Fix the blocking of selects when multiple are rendered

CHANGELOG.md

@@ -2,8 +2,6 @@
 
 ### Added
 
-- `Select`: exported `SelectRef` ([@qubis741](https://github.com/qubis741)) in [#2418](https://github.com/teamleadercrm/ui/pull/2418))
-
 ### Changed
 
 ### Deprecated
@@ -12,6 +10,8 @@
 
 ### Fixed
 
+- `Select`: Allow multiple selects being rendered at once ([@stefaandevylder](https://github.com/stefaandevylder)) in [#2422](https://github.com/teamleadercrm/ui/pull/2422)
+
 ### Dependency updates
 
 ## [16.4.2] - 22-10-28

src/components/select/Select.tsx

@@ -18,7 +18,6 @@ import ReactSelect, {
 } from 'react-select';
 import ReactCreatableSelect from 'react-select/creatable';
 import SelectType from 'react-select/dist/declarations/src/Select';
-import { GenericComponent } from '../../@types/types';
 import { COLOR, SIZES } from '../../constants';
 import Box, { omitBoxProps, pickBoxProps } from '../box';
 import { BoxProps } from '../box/Box';
@@ -130,10 +129,9 @@ const ClearIndicator = <Option extends OptionType, IsMulti extends boolean>(
 export const selectOverlayNode = document.createElement('div');
 selectOverlayNode.setAttribute('data-teamleader-ui', 'select-overlay');
 
-const activeSelects = new Set();
+let activeSelects = 0;
 
 function Select<Option extends OptionType, IsMulti extends boolean, IsClearable extends boolean>(
-  this: GenericComponent<SelectProps>,
   {
     components,
     creatable = false,
@@ -153,17 +151,17 @@ function Select<Option extends OptionType, IsMulti extends boolean, IsClearable
   ref: ForwardedRef<SelectRef<Option, IsMulti>>,
 ) {
   useEffect(() => {
-    activeSelects.add(this);
+    activeSelects += 1;
     const isOverlayMounted = document.contains(selectOverlayNode);
     if (!isOverlayMounted) {
       document.body.appendChild(selectOverlayNode);
     }
     return () => {
-      const isLastSelect = activeSelects.size <= 1;
-      if (isLastSelect) {
+      const isLastSelect = activeSelects <= 1;
+      if (isLastSelect && selectOverlayNode && document.body.contains(selectOverlayNode)) {
         document.body.removeChild(selectOverlayNode);
       }
-      activeSelects.delete(this);
+      activeSelects -= 1;
     };
   }, []);