Material Select not opening

garrithsteyn pro premium asked 2 months ago

Hi

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?

 

<Select>
<SelectInput selected="Choose your option"></SelectInput>
<SelectOptions>
<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>
</SelectOptions>
</Select>


Jakub Królak pro commented 2 months ago

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


Anna Morawska commented 2 months ago

Hi,
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.
Best,
Anna


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+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/react/re-pro.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

Remove

display: none;

in

.dropdown-content

class.

 

Cheers


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?
Best,
Ania

Please insert min. 20 characters.
Status

Answered

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