Add portal and fix container hell

Author: pbuba

example/MultiSelect/MultiSelect.css

@@ -9,27 +9,23 @@
 }
 
 .wrapper {
+  position: relative;
   border: 1px solid #ccc;
   border-radius: 15px;
   min-width: 400px;
   max-width: 700px;
   padding: 2px 5px;
-  background-color: #fff;
-}
-
-.inner-wrapper {
-  position: relative;
-  width: 100%;
-  padding-right: 40px;
+  padding-right: 50px;
   display: flex;
   flex-wrap: wrap;
+  background-color: #fff;
 }
 
-.inner-wrapper::before {
+.wrapper::before {
   content: '';
   position: absolute;
   top: 50%;
-  right: 0;
+  right: 10px;
   transform: translate(0, -50%) rotate(0deg);
   display: block;
   width: 16px;
@@ -41,7 +37,7 @@
   transition: 0.3s ease-in-out;
 }
 
-.inner-wrapper-open::before {
+.wrapper-open::before {
   transform: translate(0, -50%) rotate(180deg);
 }
 
@@ -112,7 +108,7 @@
 .reset {
   position: absolute;
   top: 50%;
-  right: 20px;
+  right: 30px;
   width: 16px;
   height: 16px;
   border: none;

example/MultiSelect/MultiSelect.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { ChangeEvent, KeyboardEvent, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { DropdownState, ReducerAction, StateChangeType, useDropdown } from '../../src';
 import './MultiSelect.css';
 
@@ -125,71 +126,71 @@ export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
 
   return (
     <div
-      className="wrapper"
+      className={classNames('wrapper', { 'wrapper-open': isOpen })}
       {...getWrapperProps()}
       onKeyDown={handleKeyDown}
       onFocus={handleFocus}
       onBlur={handleBlur}
     >
-      <div className={classNames('inner-wrapper', { 'inner-wrapper-open': isOpen })}>
-        {values.length === 0
-          ? null
-          : values.map((item: Item) => {
-              return (
-                <div className="multivalue" key={item.value}>
-                  <span className="multivalue-name">{item.name}</span>
-                  <button
-                    type="button"
-                    className="remove"
-                    onClick={handleRemoveClick(item)}
-                    tabIndex={isFocused ? 0 : -1}
-                    aria-label={`Remove value ${item.name}`}
-                  ></button>
-                </div>
-              );
-            })}
-
-        <input
-          className="input"
-          type="text"
-          id="input"
-          {...getInputProps()}
-          placeholder="Select city"
-          value={inputValue}
-          onChange={handleChange}
-          autoComplete="off"
-        />
-
-        {values.length === 0 ? null : (
-          <button
-            className="reset"
-            onClick={handleResetClick}
-            type="button"
-            aria-label="Clear all values"
-          ></button>
-        )}
-      </div>
-
-      {isOpen && (
-        <ul className="menu" {...(getMenuProps() as any)}>
-          {options.length === 0 ? (
-            <li>No data</li>
-          ) : (
-            options.map((item: Item, index) => (
-              <li
-                key={item.value}
-                className={classNames('item', {
-                  active: highlightedIndex === index,
-                  selected: values.some((el) => el.value === item.value),
-                })}
-                {...getItemProps(item, index)}
-              >
-                {item.name}
-              </li>
-            ))
-          )}
-        </ul>
+      {values.length === 0
+        ? null
+        : values.map((item: Item) => {
+            return (
+              <div className="multivalue" key={item.value}>
+                <span className="multivalue-name">{item.name}</span>
+                <button
+                  type="button"
+                  className="remove"
+                  onClick={handleRemoveClick(item)}
+                  tabIndex={isFocused ? 0 : -1}
+                  aria-label={`Remove value ${item.name}`}
+                ></button>
+              </div>
+            );
+          })}
+
+      <input
+        className="input"
+        type="text"
+        id="input"
+        {...getInputProps()}
+        placeholder="Select city"
+        value={inputValue}
+        onChange={handleChange}
+        autoComplete="off"
+      />
+
+      {values.length === 0 ? null : (
+        <button
+          className="reset"
+          onClick={handleResetClick}
+          type="button"
+          aria-label="Clear all values"
+        ></button>
       )}
+
+      {isOpen &&
+        createPortal(
+          <ul className="menu" {...(getMenuProps() as any)}>
+            {options.length === 0 ? (
+              <li>No data</li>
+            ) : (
+              options.map((item: Item, index) => (
+                <li
+                  key={item.value}
+                  className={classNames('item', {
+                    active: highlightedIndex === index,
+                    selected: values.some((el) => el.value === item.value),
+                  })}
+                  {...getItemProps(item, index)}
+                >
+                  {item.name}
+                </li>
+              ))
+            )}
+          </ul>,
+          document.body
+        )}
     </div>
   );
 };