MDB React Select - Bug


Topic: MDB React Select - Bug

dtremblay.grt premium asked 5 years ago

Expected behavior

MDB Select does not call getValue on "render"

Actual behavior

MDB Select calls getValue on "render"

Resources (screenshots, code snippets etc.)

Here is my situation. In my MDBTable, I have a button that opens a modal which contains a form with MDBSelect in it. I also have an object that contains the data to be updated (selected values of Select boxes, values of text boxes, ...). The form updates the object. Pretty standard system.

When I choose a selection on an MDBSelect, it re-renders my MDBTable for some reason.

I believe this is a bug in itself by the way

Because the table re-renders, the "getValue" is called with the previous values of my object which cause an infinite loop between the new value selected and the old value selected.I was able to patch my issue by forcing the MDBTable to re-render only when a value in it has changed.

Hence getValue shouldn't be called when MDBSelect has been rendered. Only when a selection was changed by a user.


Jakub Chmura staff premium answered 5 years ago

Hi @dtremblay.grt,

Thank you for your feedback.

Can you show me a sample of your table? It will be much easier to figure out what's wrong with select and datatable.

Best Regards,

Kuba


Oscar Bejarano pro commented 5 years ago

you do not need and example, you can render a MDBSelect and add set the getValue property and then you could see that it is called on render


Oscar Bejarano pro commented 5 years ago

and the styles for MDBSelect when you use array options are wrong and when you render the MDBSelect whit the markup you can not focus the search popup cuz it close immediatly. please fix this asap


Jakub Chmura staff premium answered 5 years ago

@Oscar Bejarano,

Look at this:

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

        class SelectPage extends Component {
          state = {
            options: [
              {
                text: 'Option 1',
                value: 'Option 1'
              },
              {
                text: 'Option 2',
                value: 'Option 2'
              },
              {
                text: 'Option 3',
                value: 'Option 3'
              }
            ],
            value: 'initial state value'
          };

          handleSelectChange = value => {
            this.setState({
              value
            });
            console.log('current select value:', value);
          };

          render() {
            console.log('state value:', this.state.value);
            return (
              <div>
                <MDBSelect
                  options={this.state.options}
                  selected='Choose your option'
                  label='Example label'
                  getValue={this.handleSelectChange}
                />
              </div>
            );
          }
        }

        export default SelectPage;

As you see getValue works perfectly fine:

This is my console after render:enter image description here

What do you mean about the "wrong style when used array options"?

Focus on MDBSelect is a known bug. We are working on the refactor of this component, but it is a time-consuming process and we can not clearly say when it will be ready.

Best, Kuba


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
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.21.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes