👉 Mobile: Cannot scroll menu when keyboard is open

[KatuGT]

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.

---

ReactSelectMobile.mp4

---

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}
              />
            )}
        />

[JeanSamGirard]

@KatuGT Did you find a workaround for this?

I have this problem with the keyboard, but also sometimes even if the keyboard isn't open.

It also happens in one of the official examples. On android, the portaling example (https://react-select.com/advanced#portaling)
Inside the modal, it's impossible to scroll.

I can't reproduce the problem on IOS however.

EDIT:

After further testing the issue on the example is unrelated and actually comes from an event listener on touchMove events that prevents normal behavior.

The issue with the keyboard seems to be a bug on chrome that doesn't take into account the keyboard offset when calculating the target for a scroll.

A workaround is setting interactive-widget=resizes-content in the viewport meta tag