BUG with <el-select> component on form scroll
We have found a problem with the <el-select> component. When the form or modal body have a scroll, the selector does not work (it does not change the value). It seems that it focuses the first element of the form to select an item.
Steps to reproduce:
1. navigate to https://preview.keenthemes.com/metronic8/vue/demo1/?_ga=2.190784491.1940734825.1669827263-1738677729.1669827263#/crafted/modals/forms/new-target
2. Edit modal-body class style to: max-height: 200px;
3. try to change "Assign" select value
Replies (11)
Hi Xavier,
Thank you for your feedback.
Unfortunately, we were not able to reproduce the issue you described. The select input is still working fine, did you change anything else in modal?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
No, we have not changed anything. The problem also exists in your vue demo, as I specified. You can reproduce it on your demo page: Metronic Demo, by opening the modal "Add New Target" and editing the body of the modal to make it scroll, leaving the selector below the box visible.
You will see that when the selector is below, when scrolling and changing any of its options, they do not change.
If you can't reproduce the error, where could I attach a video where the error is reproduced?
Best Regards,
Hi Xavier,
If you can record a video it would be great, you can upload your video to google drive and then send us a link to your video.
Also, instead of just changing a modal height, you can make the modal's content scrollable using classes modal-dialog-scrollable.
Refer to example in Bootstrap 5 doc: https://getbootstrap.com/docs/5.0/components/modal/#scrolling-long-content
On our demo page, I see that datepicker input works differently from select input, datepicker content is inside a modal but select content opens over the modal, to make datepicker behave the same you can set :teleported="true" property on component.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
thanks for your reply.
You can see the issue record from there: https://drive.google.com/file/d/1UEfa6DmlE8-DAvPRXwRrairFun7clyOi/view?usp=sharing
Best Regards,
Hi,
I think you can fix scroll issue by setting the properties below for el-select and el-date-picker:
:popper-append-to-body="false"
:teleported="false"Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
thanks for your reply. It seems to happen because the form tag is prepended to the modal's body, like in your demo.
<el-form
@submit.prevent="validateForm()"
ref="cityModalFormRef"
:model="formData"
:rules="rules"
>
<!--begin::Modal body-->
<div class="modal-body py-10 px-lg-17">
<!--begin::Scroll-->We'll try to fix it and confirm the fix.
Best Regards,
Hi Xavier,
Our demo form seems to be inside a modal's body and changing the order doesn't seem to help with this issue.
Could you please try the solution from my previous comment? This should fix an issue with the scroll.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
We've tried, it doesn't fix the issue. Did you try it with your demo?
Thanks,
Best Regards,
Hi Xavier,
Yes, we have tried this in the latest Metronic version these attributes will move elements into a modal, and when you are selecting data select dropdown should appear inside a modal and shouldn't influence a scroll.el-select element:
<el-select
:popper-append-to-body="false"
:teleported="false"
v-model="targetData.assign"
placeholder="Select a Team Member"
name="assign"
as="select"
>
<el-option value="">Select user...</el-option>
<el-option label="Karina Clark" value="1"
>Karina Clark</el-option
>
<el-option label="Robert Doe" value="2"
>Robert Doe</el-option
>
<el-option label="Niel Owen" value="3">Niel Owen</el-option>
<el-option label="Olivia Wild" value="4"
>Olivia Wild</el-option
>
<el-option label="Sean Bean" value="5">Sean Bean</el-option>
</el-select>el-date-picker element:<el-date-picker
v-model="targetData.dueDate"
type="date"
placeholder="Select a date"
:popper-append-to-body="false"
:teleported="false"
popper-class="override-styles"
name="dueDate"
/>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
:popper-append-to-body="false"
:teleported="false"Yes, as you said the above code fixed the issue. Appreciate that, thanks!
Best Regards,
Hi Xavier,
Glad to hear that. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
