Issue with dropdown in dataTable

[Sladafolw]

Hello,

I am experiencing an issue with the DataTable component in PrimeVue. I have a DataTable with selectionMode set to “single” and editMode set to “row”. In one of the columns, I am using a Dropdown component inside a template with the #editor directive.

The problem arises when I try to select(if the window is small) an option from the Dropdown in edit mode. If the DataTable has a scrollbar, the entire table scrolls unexpectedly when I click on the Dropdown. This makes it difficult to select an option as the Dropdown and the whole row seem to jump around. "primevue": "^3.49.1",
"vue": "^3.4.21",

<template>
<div class="card p-fluid">
    <DataTable v-model:editingRows="editingRows" :value="products" selectionMode="single" editMode="row" v-model:selection="selectedStaff"  dataKey="id" @row-edit-save="onRowEditSave"
        :pt="{
            table: { style: 'min-width: 50rem' },
            column: {
                bodycell: ({ state }) => ({
                    style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem'
                })
            }
        }"
    >
        <Column field="code" header="Code" style="width: 20%">
            <template #editor="{ data, field }">
                <InputText v-model="data[field]" />
            </template>
        </Column>
        <Column field="name" header="Name" style="width: 20%">
            <template #editor="{ data, field }">
                <InputText v-model="data[field]" />
            </template>
        </Column>
        <Column field="inventoryStatus" header="Status" style="width: 20%">
            <template #editor="{ data, field }">
                <Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" :autoZIndex="false">
                    <template #option="slotProps">
                        <Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
                    </template>
                </Dropdown>
            </template>
            <template #body="slotProps">
                <Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
            </template>
        </Column>
        <Column field="price" header="Price" style="width: 20%">
            <template #body="{ data, field }">
                {{ formatCurrency(data[field]) }}
            </template>
            <template #editor="{ data, field }">
                <InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
            </template>
        </Column>
        <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
    </DataTable>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
const selectedStaff = ref()
const products = ref();
const editingRows = ref([]);
const statuses = ref([
{ label: 'In Stock', value: 'INSTOCK' },
{ label: 'Low Stock', value: 'LOWSTOCK' },
{ label: 'Out of Stock', value: 'OUTOFSTOCK' }
]);

onMounted(() => {
ProductService.getProductsMini().then((data) => (products.value = data));
});

const onRowEditSave = (event) => {
let { newData, index } = event;

products.value[index] = newData;
};
const getStatusLabel = (status) => {
switch (status) {
    case 'INSTOCK':
        return 'success';

    case 'LOWSTOCK':
        return 'warning';

    case 'OUTOFSTOCK':
        return 'danger';

    default:
        return null;
}
};
const formatCurrency = (value) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
}

</script>

[tugcekucukoglu]

Cannot replicate with the latest version. Could you have a reproducer link?