Topic: MDBSelect will not open

duckjones free asked 5 years ago


I can't get my MDBSelect element to open when clicked on. I have 3 options defined:

const transactionTypes = [
{text: "Income", value: "1"},
{text: "Debt", value: "2"},
{text: "Bills", value: "3"},
];

I'm trying to use it in a modal, but I moved it to a regular page spot under an MDBContainer object to verify it wasn't an issue with the modal and it still does not open. The markup appears to be correct, I suppose, leading me to believe it must be a JS issue, but I do not see any errors in the Console.

<div options="[object Object],[object Object],[object Object]" class="select-wrapper mdb-select md-form">
    <span class="caret">▼</span><input type="text" readonly="" class="select-dropdown" value="Choose Type" style="caret-color: transparent;">
    <ul class="dropdown-content select-dropdown fadeElement fadeIn" style="top: 0.6rem;">
        <li data-multiple="false" class="disabled"><span data-multiple="false" class="filtrable">Choose Type</span></li>
        <li data-multiple="false" class=""><span data-multiple="false" class="filtrable">Income</span></li>
        <li data-multiple="false" class=""><span data-multiple="false" class="filtrable">Debt</span></li>
        <li data-multiple="false" class=""><span data-multiple="false" class="filtrable">Bills</span></li>
    </ul>
</div>

Konrad Stępień staff answered 5 years ago


Hi @duckjones,

Can you test my code?

import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';

class SelectComponent extends Component {
  state = {
    transactionTypes: [
      {
        text: 'Income',
        value: '1'
      },
      {
        text: 'Debt',
        value: '2'
      },
      {
        text: 'Bills',
        value: '3'
      }
    ]
  };

  render() {
    return (
      <div>
        <MDBSelect
          options={this.state.transactionTypes}
          selected='Choose your Type'
          label='Transaction Types'
        />
      </div>
    );
  }
}

export default SelectComponent;

For me, this code works correctly.

Tell me if the problem still exists.

Best regards, Konrad.



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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.0
  • Device: Web
  • Browser: Chrome
  • OS: Mac OSX
  • Provided sample code: No
  • Provided link: No