[SOLVED] Whenever I select the dropdowns in iframe, it soft scrolls to the top of the form

Whenever I select the dropdowns in iframe, it soft scrolls to the top of the form

In a React app, the sign-up component behaves correctly. However, when embedded in an iframe, choosing any option in a dropdown causes the viewport to scroll to the top of the form.

Here is the react code with MUI

      <Stack direction={{ xs: 'column', sm: 'row' }} alignItems="center" spacing={2}>
        <Stack width={1}>
          <Typography>How would you like to pay?</Typography>
        </Stack>
        <Stack width={1}>
          <Field.Select name="paymentMethod" label="Payment Method" required>
            {payments.map((option) => (
              <MenuItem key={option.id} value={`${option.id}::${option.name}`}>
                {option.name}
              </MenuItem>
            ))}
          </Field.Select>
        </Stack>
      </Stack>

It works well in react, but not working in iframe

Solution

<iframe src="..." scrolling="no" style="overflow: hidden;" />

you can try like this

Material UI Select uses a portal by default to render the dropdown menu. This can cause issues in iframes. You can disable it:

<Field.Select
  name="paymentMethod"
  label="Payment Method"
  required
  MenuProps={{ disablePortal: true }}
>
  {payments.map((option) => (
    <MenuItem key={option.id} value={`${option.id}::${option.name}`}>
      {option.name}
    </MenuItem>
  ))}
</Field.Select>