BUG with <el-select> component on form scroll

We have found a problem with the 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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(