[Bug]: Virtualized Select still does render all options on the DOM

[xeinebiu]

Description

The issue is reproducable even on the demostration of Virtualized Select. You can see that all countries elements are rendered on the DOM which defeats the virtualization purpose.

Link to Reproduction (or Detailed Explanation)

https://ark-ui.com/react/examples/virtualized-select

Ark UI Version

4.2.0

Framework

• React
• Solid
• Vue

Additional Information

Solution

Do not include the <Select.HiddenSelect />, I am not sure what is the purpose of HiddenSelect but removing this fixes the issue.

[cschroeter]

@xeinebiu

Thanks for taking the time to create this issue! Yes, avoiding HiddenSelect would prevent hidden options in the DOM. However, for this example with ~250 items, it should work fine.

If you plan to exceed 10k items, we definitely recommend not using a Hidden Select.

[xeinebiu]

@cschroeter thanks for your response. May I ask, whats the role of HiddenSelect?

[cschroeter]

@xeinebiu Its primary use case is for form submissions.

const { register, handleSubmit } = useForm<Inputs>();

<Select.HiddenSelect {...register('framework')} />;

Alternatively, you can replace Select.HiddenSelect with a Controller. Here's an example using react-hook-form:
https://react-hook-form.com/get-started#IntegratingControlledInputs