Topic: MDBSelect
Petr Urban priority asked 1 year 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 1 year 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