MDBSelect

Petr Urban pro premium priority asked 2 years 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 2 years 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
  • User: Pro
  • 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
Tags