mdb select not working

Hi @Manamapps,

Please update MDBReact version to 4.24.0 and check that your problem still exist.

If the update didn't solve this issue, please paste here an example of your select code, and then I try to fix your problem.

Best regards,

Kuba

<MDBSelect className='colorful-select w-10 float-left dropdown-primary mt-2 hidden-md-down'>
          <MDBSelectInput selected='Rows number' />
          <MDBSelectOptions>
            <MDBSelectOption disabled>Rows number</MDBSelectOption>
            <MDBSelectOption value='1'>5 rows</MDBSelectOption>
            <MDBSelectOption value='2'>25 rows</MDBSelectOption>
            <MDBSelectOption value='3'>50 rows</MDBSelectOption>
            <MDBSelectOption value='4'>100 rows</MDBSelectOption>
          </MDBSelectOptions>
        </MDBSelect>

please help. im really stuck with my project because of this

Hi @Manamapps,

I test this code snippet and on my computer, it works pretty well. Here is a proof:

Please uninstall node_modules folder and package-lock.json/yarn.lock from your project directory, then run npm i / yarn command in terminal.

Be sure to import style files into the src/index.js before the App.js file import:

Full instructions: HERE.

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

After that try again.

Please let me know if my solution works for you.

Best, Kuba

Hi @Manamapps,

I made a snippet for you. Try this:

import React, { Component } from "react";
import {
  MDBSelect,
  MDBSelectInput,
  MDBSelectOptions,
  MDBSelectOption
} from "mdbreact";

class SelectPage extends Component {
  render() {
    return (
      <div>
        <MDBSelect className="colorful-select w-10 float-left dropdown-primary mt-2 hidden-md-down">
          <MDBSelectInput selected="Rows number" />
          <MDBSelectOptions>
            <MDBSelectOption disabled>Rows number</MDBSelectOption>
            <MDBSelectOption value="1">5 rows</MDBSelectOption>
            <MDBSelectOption value="2">25 rows</MDBSelectOption>
            <MDBSelectOption value="3">50 rows</MDBSelectOption>
            <MDBSelectOption value="4">100 rows</MDBSelectOption>
          </MDBSelectOptions>
        </MDBSelect>
      </div>
    );
  }
}

export default SelectPage;

If this snippet will not work, please give me more details about your project, I will try to figure it out what's going one.

Best, Kuba

any luck? you markes this as answered but it still not working

go to projects, processes or providers tab and see that all the drop downs dont work. theyare hardcoded

hi again. I'm using the MDBSelect but the getValue function is filred on render/ how can i make it only fired when chosen? this is the code

<MDBSelect className='colorful-select dropdown-primary mx-2'
            getValue={(event) => addFilter(event)}
            multiple>
            <MDBSelectInput selected={'Add filter'} />
            <MDBSelectOptions>
              {data.data.columns.map((column, index) => <MDBSelectOption value={column.label} key={index}>{column.label}</MDBSelectOption>)}

            </MDBSelectOptions>
          </MDBSelect>

Hi @Manamapps,

I made a little code snippet to show you how to achieve this:

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

class SelectPage extends Component {
  state = {
    basicOptions: []
  };

  componentDidMount() {
    this.setState({
      basicOptions: this.createOptions()
    });
  }

  createOptions = () => [
    {
      text: 'Option One',
      value: '1'
    },
    {
      text: 'Option Two',
      value: '2'
    },
    {
      text: 'Option Three',
      value: '3'
    },
    {
      text: 'Option Four',
      value: '4'
    }
  ];

  getValueOfSelect = value => {
    console.log(value);
  };

  render() {
    const { basicOptions } = this.state;

    return (
      <MDBContainer>
        <MDBRow className='d-flex justify-content-center'>
          <MDBCol md='6'>
            <MDBSelect
              color='primary'
              getValue={this.getValueOfSelect}
              getTextContent={this.getValueOfSelect}
              options={basicOptions}
              label='Basic example'
            />
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    );
  }
}

export default SelectPage;

getValue fires on change.

Best, Kuba

Hi, hello, which I must attach so that there is padding in the search box, apart from that the search in the select component does not work