fix(Dropdown): prevent horizontal scroll, when dropdown item selecting

[KumJungMin]

Defect Fixes

• fixed Dropdown: incorrectly renders when in a modal on top of horizontally scrollable content #4488

Testing & Resolve method

Issue generation condition

• Horizontal scrolling occurs at the top-level element.
• There is a dropdown inside a dialog modal.
• When opening the modal and trying to select from the dropdown, the horizontal scroll shifts.

How to Issue Generation

• If you want to reproduce the issue, you can add the following code in the master branch and test it.

assets/styles/layout/_core.scss

// overflow-x: hidden;

pages/sample/index.vue

<template>
    <div>
        <div :style="{ backgroundColor: 'red', width: '200vw', height: '20px' }"></div>
        <Dialog v-model:visible="visible" modal header="My modal" :style="{ width: '50vw' }">
            <Dropdown v-model="selected" :options="items" placeholder="Select an item" />
        </Dialog>
        <Button label="Open Modal" @click="visible = true" />
    </div>
</template>

<script>
import Dropdown from 'primevue/dropdown';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
export default {
    setup() {
        definePageMeta({
            layout: ''
        });
    },
    data() {
        return {
            visible: false,
            selected: null,
            items: [
                { label: 'Item 1', value: 'Item 1' },
                { label: 'Item 2', value: 'Item 2' },
                { label: 'Item 3', value: 'Item 3' }
            ]
        };
    },
    components: {
        Dropdown,
        Dialog,
        Button
    }
};
</script>

• �And, as shown in the video below, horizontal scrolling occurs when trying to select a dropdown item. ( http://localhost:3000/sample)

npm run dev

2024-05-18.8.04.35.mov

How to resolve

• The reason for the horizontal scrolling is that the logic for moving the horizontal scroll of the dropdown is triggered when trying to select a dropdown item.
• Therefore, preventing the horizontal scroll movement will stop the issue from occurring.

// before
 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); // cause: "inline: start"

// after
 element.scrollIntoView && element.scrollIntoView({ block: 'nearest' });

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		May 18, 2024 10:56am
primevue-v4	⬜️ Ignored (Inspect)	Visit Preview		May 18, 2024 10:56am

[HardWorkerFree]

It looks like this bug has reappeared in version 4.0.0+

primevue/packages/primevue/src/select/Select.vue

Line 891 in 3ed7237

element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });

The fix (3.53.0) looked like this

primevue/components/lib/dropdown/Dropdown.vue

Line 865 in 8d8ca02

element.scrollIntoView && element.scrollIntoView({ block: 'nearest' });