Controllable Focus in Select Component

[rizaldirnm]

Is it possible to make "controllable" auto focus in <Select /> component?

the code something like this:

     useEffect(() => {
         setFocus('area_origin_id');
         // setFocus --> API react-hook-form
     }, [setFocus]);
     
     
      <Controller 
        control={control}
        name="area_origin_id"
        render={({ field: { value, onChange, ref } }) => (
          <Select
            searchType="search"
            label="Area Pick Up"
            className="col-span-1"
            labelClassName="text-gray-900"
            inPortal={false}
            value={value}
            onChange={(val) => {
              onChange(val);
              setTimeout(() => {
                setFocus("pickup_address");
              }, 200);
            }}
            ref={ref}
            options={orgAreaOpt || []}
            getOptionValue={(option) => option.value}
            displayValue={(selected: number) => {
              return (orgAreaOpt || []).find((item) => item.value === selected)
                ?.label;
            }}
            searchable
            error={errors?.area_origin_id?.message}
            clearable
            disabled={!orgAreaOpt}
            onClear={() => {
              resetField("area_origin_id", { defaultValue: undefined });
            }}
          />
        )}
      />

Its work in <Input /> component but not work in <Select /> component.

[md-nahid]

Hi @rizaldirnm thanks for addressing the issue.

Will add the autofocus soon

[md-nahid]

Hi @rizaldirnm

We’ve added the feature you requested to RizzUI—both the Select and Multiselect components now support an autofocus prop. Please update your RizzUI, and let us know if you encounter any other issues.

Thanks!