Material Select not opening

garrithsteyn pro premium asked 2 months ago


I have taken the Material Select directly from the example, but it does not open/dropdown when I click on it.

Any idea why this could be happening and how to fix it?


<SelectInput selected="Choose your option"></SelectInput>
<SelectOption disabled>Choose your option</SelectOption>
<SelectOption>Option nr 1</SelectOption>
<SelectOption>Option nr 2</SelectOption>
<SelectOption>Option nr 3</SelectOption>
<SelectOption>Option nr 4</SelectOption>
<SelectOption>Option nr 5</SelectOption>

Jakub Królak pro commented 2 months ago

I'm having the same issue, please help :)

Anna Morawska commented 2 months ago

thank you for reporting this. I've tried to recreate this situation and it looks like everything works fine. Please, make sure you have the latest MDB React Pro version. It should fix the problem. If not, please let us know which browser you use, and are there any console warnings or errors.

garrithsteyn pro premium commented 2 months ago

Hi Anna
1. Created a clean react app using create-react-app.
2. Added mdbreact dependency to package.json using "mdbreact": "git+".
3. Imported font-awesome, bootstrap and mdb style sheets under index.js.
4. Imported import { Select, SelectInput, SelectOption, SelectOptions } from 'mdbreact'; under App.js
5. Added sample Material Select as posted in original post above.
6. Tested in Chrome, Firefox and Edge. It doesn't work in any of the browsers and no console warnings appear.

garrithsteyn pro premium answered 2 months ago

Since mdb support is sleeping, I found a fix for this problem.

Thanks to @glockwood for finding the workaround.


If you edit node_modules/mdbreact/dist/css/mdb.css, line 9591


display: none;






Anna Morawska commented 2 months ago

Hi garrithsteyn,
thank you for posting your solution. It's strange, I've just tested it again, and on my environment, it works perfectly fine.
We will take a closer look at this in the next sprint.
Best, Ania

Jakub Królak pro commented 2 months ago

This didn't solve my issue though

Hi Jakub,

I've checked again and our Select works fine ;)

Maybe check out your import statements in index.js file. They have to be placed in correct order. (style files have to be imported before the App.js file)

import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
Is this solves your problem?

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No