MDBSelect not closing when enter key pressed, please respond


Topic: MDBSelect not closing when enter key pressed, please respond quickly i have a showcase almost right now and they will see this bug

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


Jakub Chmura staff premium answered 5 years ago

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


Pavel Isel Pérez Pupo commented 5 years ago

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

class App1 extends Component { render() { return ( ); } }

export default App1;


Pavel Isel Pérez Pupo commented 5 years ago

in any case you put several of your components, no matter the context, a lot fails, it happened to me with navs and some others including now the select component. i asked a solution 3 days ago, i had a presentation that same morning and it did not end well becaus of this bug of something a paid for. are you serious about the premium support???


Pavel Isel Pérez Pupo commented 5 years ago

i hope this time doesn't take you 3 days to give me an answer


Jakub Chmura staff premium answered 5 years ago

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


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.22.0
  • Device: laptop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No