MDBSelect not closing when enter key pressed, please respond

HI @Pavel Isel Pérez Pupo.

We know this bug and are planning to refactor this component soon.

If you want, I will try to find a temporary solution only for your case, but I need a sample of your code.

Best regards,

Kuba

Hi @Pavel Isel Pérez Pupo,

We create a temporary solution for you. You need to add these functions to your code:

           componentDidMount() {
        document.addEventListener('keydown', e => this.simulateEnter(e));
      }

       simulateEnter = e => {
    const select = document.querySelector('.select-dropdown.fadeIn');
​
    if (e.key === 'Enter') {
      if (!!select) {
        const li = select.querySelectorAll('li');
        const active = Array.from(li).filter(el => el.classList.contains('active'))[0];
​
        const index = Array.from(li).indexOf(active);
​
        document.body.click();
        this.setActive(index);
      }
    }
​
    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !select) {
      const selectNotFade = document.querySelector('.select-dropdown');
      selectNotFade.click();
    }
  };

      setActive = index => {
        let arr = this.state.options;
        arr.map(el => ({ ...el, checkded: el.value === index ? true : false }));
      };

I paste the full component code below

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

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

      componentDidMount() {
        document.addEventListener('keydown', e => this.simulateEnter(e));
      }

       simulateEnter = e => {
    const select = document.querySelector('.select-dropdown.fadeIn');
​
    if (e.key === 'Enter') {
      if (!!select) {
        const li = select.querySelectorAll('li');
        const active = Array.from(li).filter(el => el.classList.contains('active'))[0];
​
        const index = Array.from(li).indexOf(active);
​
        document.body.click();
        this.setActive(index);
      }
    }
​
    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !select) {
      const selectNotFade = document.querySelector('.select-dropdown');
      selectNotFade.click();
    }
  };

      setActive = index => {
        let arr = this.state.options;
        arr.map(el => ({ ...el, checkded: el.value === index ? true : false }));
      };

      render() {
        return (
          <div>
            <MDBSelect
              options={this.state.options}
              selected='Choose your option'
              label='Example label'
            />
          </div>
        );
      }
    }

    export default SelectPage;

Best regards,

Kuba