Topic: MDBSelect will not open
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>
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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