👉 Mobile: Cannot scroll menu when keyboard is open

I tried reproducing the issue in a minimal setup (CodeSandbox), but I wasn’t able to get the exact same behavior there. However, I have recorded a video that clearly shows the problem on a real device.

Actual Behavior:

On mobile, when using a searchable Select, tapping on the input opens the keyboard.

While the keyboard is open, it is not possible to scroll through the list of options. The list stays "locked" until the keyboard is dismissed.

Expected Behavior:

The list of options should remain scrollable even while the keyboard is open, so users can keep navigating without having to manually close the keyboard.

Notes:

This happens inside a form where react-select is wrapped by react-hook-form’s Controller, but I think the problem is reproducible without it.

Interestingly, in the main example on the official React Select website, the scroll works as expected, even with the keyboard open.

The video attached shows the issue happening in my project.

What I Tried

I tested using menuPortalTarget={document.body}, but it didn’t fix the problem.

https://github.com/user-attachments/assets/529e0dfe-7f61-4403-acf8-be76704d3061

I´ll put here part of my code if it helps

      <Controller
            name="localidadEmprendimiento"
            control={form2.control}
            render={({ field: { onChange, value } }) => (
              <Select
                // menuIsOpen
                menuPlacement="auto"
                blurInputOnSelect={true}
                components={{ DropdownIndicator: CustomDropdownIndicator }}
                instanceId="select-localidad-emprendimiento"
                styles={customSelectStyles}
                classNames={{
                  placeholder: () => "text-sm sm:text-base",
                  singleValue: () => "text-sm sm:text-base",
                  option: () => "text-sm sm:text-base p-2.5 sm:p-5",
                  control: () =>
                    "pl-3 sm:pl-6 pr-1 sm:pr-[16px] !min-h-[45px] sm:!min-h-[55px]",
                }}
                placeholder="Seleccioná"
                options={getLocalidadesPorUbicacion().map((option) => ({
                  value: option.key,
                  label: option.label,
                }))}
                value={
                  getLocalidadesPorUbicacion().find(
                    (option) => option.key === value,
                  )
                    ? {
                        value,
                        label: getLocalidadesPorUbicacion().find(
                          (option) => option.key === value,
                        )?.label,
                      }
                    : null
                }
                onChange={(selectedOption) => onChange(selectedOption?.value)}
                isSearchable={true}
                isDisabled={!ubicacionSeleccionada}
              />
            )}
        />

No repository file or test is named. Start by comparing the attached real-device video and the official React Select searchable Select example, then investigate the supplied TypeScript usage with react-hook-form Controller and menuPortalTarget; done means the options list remains scrollable while the mobile keyboard is open.