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!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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