Me está costando mucho tratar de hacer que react-select renderice un menú desplegable en una nueva ventana. Supuse que había algunos problemas con los componentes con estilo y encontré este problema de GitHub con una solución a mi problema exacto: https://github.com/styled-components/styled-components/issues/3274

Pero aún no está funcionando. ¿Alguien puede ayudarme a entender cómo representar correctamente el menú desplegable react-select en una nueva ventana?

Aquí está mi código:

 // app.tsx import "./styles.css"; import React, { useState } from "react"; import SelectComponent from "./control"; export default function App() { const [show, setShow] = useState(false); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <a onClick={() => setShow(!show)}>Click me</a> {show && <SelectComponent show={show} />} <div style={{ marginTop: "50px" }}>Status: {show ? "True" : "False"}</div> </div> ); }

Y el otro archivo es:

 // control.tsx import React, { useState, useRef } from "react"; import Select from "react-select"; import styled, { StyleSheetManager } from "styled-components"; import Popout from "react-popout"; const options = [ { value: "chocolate", label: "My Chocolates" }, { value: "strawberry", label: "Strawberry" }, { value: "vanilla", label: "Vanilla" } ]; const SelectComponent = ({ show }) => { const nwRef = useRef(); return ( <StyleSheetManager target={nwRef.current}> <div ref={nwRef}> <Popout isPopout={true}> <Select options={options} // menuPortalTarget={nwRef.current} styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }} /> </Popout> </div> </StyleSheetManager> ); }; export default SelectComponent;

¿Puede alguien indicarme la dirección correcta para mostrar ese menú desplegable correctamente? Incluso probé el menuPortalTarget react-select pero no funciona. Cualquier ayuda sería apreciada.