fix(Select): select value flash when selected item

[Hwacc]

📝 Summary

Fix Select component flickering issue

🔗 Related Issues

resolves #2160

🧪 How it was caused

It needs to be traced back to this PR #1916
Using setTimeout to delay and control the rendering flow is a bad solution for handling animation.
The analysis of the causes of the flickering is as follows:

1. When we use setTimeout, the whole flow:

2. The original flow likes:

✅ Solutions

Very easy: we fully leverage the <Presence> component’s features to control the switching of child components.
but we need tag <Presence> as force-mount to keep it alive, becasue we focus in its child components, don’t want it to be destroyed immediately when closing.

In addition, we use force-mount in <Presence>, so, SelectContentProps's forceMount prop was no longer works. Should we consider removing it?

📸 Screenshots

Now, we can use data-[state=close] to control our close animate as usual

Form.default._.Reka.UI.-.Google.Chrome.2025-10-22.17-03-58.mp4

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2239

commit: c76220d

[RitvikSardana]

Please merge this ASAP.

This bug is very irritating

[jpmsantana]

@Hwacc what do we need to merge this? this bug irritates the users who use the pages that are consuming this component.

[RitvikSardana]

Why is no one updating this PR?

Could anyone please work on it?

[Hwacc]

I’ve resolved the merge conflicts in v2.7.0 and looking forward to review. It looks like quite a few people have run into issues with this Select component. @kricsleo , do we have plans to merge this PR into the next release? Thanks.

[kricsleo]

Sorry for the late response. I normally don't merge PRs 🙏, so I'll leave it to the author, zernonia.