Topic: MDBSelect
Petr Urban priority asked 10 months ago
Expected behavior Should work without error in console log. Actual behavior I'm using the MDBSelect component and I'm getting the following error in console:
Uncaught TypeError: scrollableParent is null scrollToInput MDBSelect.vue:516 open MDBSelect.vue:392 setTimeout handler*open MDBSelect.vue:390 toggle MDBSelect.vue:359
Resources (screenshots, code snippets etc.) Here is my component:
<MDBRow class="mt-4 grey-text text-center">
<MDBCol col="2"/>
<MDBCol col="8" class="d-flex justify-content-center">
<MDBSelect class="mb-0 col-6"
v-model:options="batchIdOptions"
v-model:selected="selectedBatchId"
@change="getBatchIdInfo"
@clear="clearBatchIdSelection"
:clear-button="true"
:preselect="false"
color="info"
filter
id="batchIdSelect"
data-cy="batchIdSelect"
:disabled="calculationIsRunning || !smartDatabaseEnabled">
</MDBSelect>
</MDBCol>
<MDBCol col="2"/>
</MDBRow>
and here how I get the data:
setup() {
const eventBuss = inject('eventBuss');
const axioss = inject('axioss'); // inject axios
const batchIdOptions = ref([
{text: '-- Please select an option --', value: null, disabled: true}
]);
const selectedBatchId = ref("");
const getBatchIds = () => {
let url = "/batch-ids";
let i = 1;
axioss
.get(url)
.then(response => {
batchIdOptions.value.push(...response.data.map(k => ({
text: 'Batch ID ' + k.batch_id + ' at time ' + k.log_date,
value: k.batch_id,
selected: false,
mdbKey: i++
})));
if (batchIdOptions.value.length === 0) {
eventBuss.$emit("globalInfo", "No batch IDs found. Probably using portable version without DB support.");
}
})
.catch(error => {
console.log(error);
eventBuss.$emit("globalError", error.response.data["error"]);
});
}
return {
batchIdOptions,
selectedBatchId,
getBatchIds,
};
},
Should I include the MDBSelect into another special tag or something?
Thanks for any tip/help.
BR, Petr
Bartosz Cylwik staff answered 10 months ago
Hi, from what I can see, the issue occurs when filter
prop is present, and the page is not scrollable (doesn't have vertical scrollbar), because adding:
body {
min-height: 150vh
}
in my snippet: https://mdbootstrap.com/snippets/vue/b-cylwik/5365998#css-tab-view makes the error go away.
Unfortunatelly this is a bug. I have added this issue to our list. Thank you for reporting this. Best Regards!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 4.0.0
- Device: MacBook
- Browser: Firefox
- OS: MacOS Ventura
- Provided sample code: No
- Provided link: No