-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react18 support #5459
Comments
Hi @bturner1273, Are you able to reproduce the issue so we can look into it further? |
Here's a slightly bigger reproduction. This is simply an app that converts tweets to images, but it isn't working correctly in v18. An error occurred in development env:
app: https://tweet2image-6b8636qux-anzu.vercel.app/ |
Hi @ci7lus, it's a bit hard to tell from that example if it's an issue with React 18, or an issue with Remix. I know there is a bit of extra work involved with getting Remix to play nicely with Emotion (which React Select uses for styling). |
I'm getting the same If I add a unique |
Hi, I had the same problem with next (13.2.1) and I found a workaround: const MySelect = ({
placeholder,
options,
}: ProjectEditionSelectProps) => {
const id = Date.now().toString();
const [isMounted, setIsMounted] = useState(false);
// Must be deleted once
// https://github.com/JedWatson/react-select/issues/5459 is fixed.
useEffect(() => setIsMounted(true), []);
return isMounted ? (
<Select
id={id}
options={options}
placeholder={placeholder}
className="project-edition-select-container"
classNamePrefix="project-edition-select"
/>
) : null;
};
export default MySelect; My workaround is to display the If you use the experimental version of Next 13, you may use use-client directive. I'm not particularly happy with this "fix" but it leaves my console in peace. |
Having the same issue with Next 13 |
Same issue with NextJS 13.4! |
Fix it, by adding interface : 'use client'
interface ISelectProps {
data: boolean;
isDisabled: boolean;
isFocused: boolean;
isSelected: boolean;
id?: number;
} Then make props look like this: option: (styles: any, props: ISelectProps) => { ... Finally put it in Select from react-select... <Select
instanceId={useId()}
{...elseProps}
/> |
Hey thanks for the solution. This works as the Component renders once in the client side. |
In my case, i solved using const AsyncSelect = dynamic(() => import("react-select/async"), { ssr: false }); |
Same issue on my side as well. |
Same problem over here... |
Same problem |
Thanks for the solution, it is work for me, too but can u explain to me that what exactly u did here? I'm using "use server" also in the page. why we are check the ssr |
"I don’t know if anyone is still having the same problem. I found something that fixes the message console issue <Select |
For Nextjs import with next dynamic. It worked for me import dynamic from 'next/dynamic' Loading... ,}) |
For the Nextjs 14 with Pages Router this is the fix import dynamic from "next/dynamic"; It'll render the Select Component on the client side. |
@WinnieS0728 you can add Input property in components and make aria-activedescendant undefined or whatever you like it. like below:
|
@everythinginjs before this I even create a fake select component to prevent the flash before isClient useEffect work lol. here I share my code to anyone use nextJS and have server issue
export function ReactSelect({ className, name, ...props }: Parameters<Select>[0]) {
return (
<>
<Select
{...props}
instanceId={`react-select-${props.name}`}
className={cn("w-full", className)}
closeMenuOnSelect={props.isMulti ? false : true}
menuPlacement="auto"
components={{
Input: (props) => (
<components.Input {...props} aria-activedescendant={undefined} />
),
}}
/>
</>
);
}
function FakeReactSelect({
placeholder = "Select...",
...props
}: Parameters<Select>[0] | Parameters<AsyncSelect>[0]) {
return (
<>
<div
className={cn(
"flex h-[38px] w-full rounded-[4px] border-[1px] border-[#cccccc] bg-white",
props.className,
)}
>
<p className="flex w-full items-center overflow-x-clip px-[10px] py-[2px] text-[#808080]">
{placeholder}
</p>
<div className="my-2 w-[1px] bg-[#cccccc]"></div>
<div className="flex aspect-square items-center justify-center p-2">
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
<path
fill="#cccccc"
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
></path>
</svg>
</div>
</div>
</>
);
}
function useClient() {
const [isClient, setClient] = useState<boolean>(false);
useEffect(() => {
setClient(true);
}, []);
return isClient;
}
export function ReactSelect(props: Parameters<Select>[0]) {
const isClient = useClient();
return (
<>
{isClient ? (
<Select
{...props}
instanceId={`react-select-${props.name}`}
className={cn("w-full", props.className)}
closeMenuOnSelect={props.isMulti ? false : true}
menuPlacement="auto"
/>
) : (
<FakeReactSelect {...props} />
)}
</>
);
} |
This worked for me in the app router with |
This is so bad that I have to wait for render to see the input when doing Really, there is still no proper fix for this ? |
I have same issue. +1 |
Thank you @WinnieS0728 |
Just add the instanceId prop to the Select component. You can achieve this by using the useId hook provided by React or you can just input a random id yourself.
|
app-index.js:33 Warning: Prop |
Works for app folder as well, thanks! |
Sorry! How worked for you? How can i remove that warning. |
I ran into the same issue; my solution was a combination of using dynamic ssr false and combining the idea of a fake select on loading, as suggested by @WinnieS0728. const Select = dynamic(() => import('react-select/async'), {
ssr: false,
loading: () => <FakeReactSelect placeholder="Select..." />,
});
function FakeReactSelect({
placeholder = 'Select Job Roles...',
className,
}: {
placeholder: string;
className?: string;
}) {
return (
<>
<div
className={cn(
'flex h-[38px] w-full rounded-[4px] border-[1px] border-[#cccccc] bg-white text-sm',
className
)}>
<p className="flex w-full items-center overflow-x-clip px-[10px] py-[2px] text-[#808080]">
{placeholder}
</p>
<div className="my-2 w-[1px] bg-[#cccccc]"></div>
<div className="flex aspect-square items-center justify-center p-2">
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
<path
fill="#cccccc"
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
</svg>
</div>
</div>
</>
);
} this renders a fake select while the original select loads on client, giving an illusion of responsiveness. |
are u fix that ?? |
No |
for anyone using Next.JS, we did this: const ValueContainer = dynamic(
() => import("react-select").then((mod) => mod.components.ValueContainer),
{
ssr: process.env.NODE_ENV === "production",
},
);
return (
<ReactSelect
...
components={{
ValueContainer: (props) => (
<ValueContainer {...props} aria-activedescendant={undefined} />
),
}}
...
/>
) Client side render the ValueContainer component on development to get rid of the warning / error |
Is there a reason a fix for this isn't built into the library yet? This seems to be a large issue. |
Chiming in, during development:
I also do notice a small rendering flicker/change difference between what is rendered server side vs client side in dev
|
I also ran into this issue. I'm on reactv18 and I only see the issue when on production and in the Safari browser. All other browsers work well on production. The issue is affecting my multi-select dropdown and my custom single-select dropdown |
I figured out that my issue is caused by my csp security. It prevents the inline styles from being added so the dropdowns look broken without the styles in place. I tried using nonce to resolve it but haven't been able to get the inline styles to be added with what I've tried so far. |
I had the same issue w/ nextjs 14.2.4 and react-select 5.8.0. I ended up setting the instanceId and downgrading to 5.7.7 to remove the aria-active-descendent warning. |
Thanks! I can confirm that downgrading react-select to |
A cleaner solution would be to use lazy load (dynamic) with ssr false. |
…ion" Client: "react-select-3-live-region" JedWatson/react-select#5459
well i googled and find this issue here which is similar to mine. I am using i am using react 18.3.1, next 15, react-select 5.8.2 and here are the error log
|
I tried If you get the error Also, this code helped me solve the problem.
|
Still an issue with react 19. |
@everythinginjs and @transitive-bullshit solutions together is working fine, even for React 19, but remember this:
I was getting a focus issue and moving out the Input solved my problem. |
@rodgarcialima i got the problem using next 15 and react 19 even when there is no override and a static option list as an array. this is as minimal i can make it, and the ssr code still differs from client. import Select from 'react-select'; outside of the component: const languageOptions: Array<Option> = [
{ label: 'label1', value: 'value1' },
{ label: 'label2', value: 'value2' },
{ label: 'label3', value: 'value3' },
{ label: 'label4', value: 'value4' },
{ label: 'label5', value: 'value5' },
{ label: 'label6', value: 'value6' },
{ label: 'label7', value: 'value7' },
{ label: 'label8', value: 'value8' },
{ label: 'label9', value: 'value9' },
{ label: 'label10', value: 'value10' },
]; within the component: <Select
aria-label="change language"
options={languageOptions}
/>
|
Any solution ? |
Yes, after these changes, it is still happening when we use macos. |
it seems as though the advanced sortable multi-select example is not compatible with react-18. I have a project where it works as intended using react-16 then react-18 it bugs out on drag
The text was updated successfully, but these errors were encountered: