Topic: MDBSelect not closing when enter key pressed, please respond quickly i have a showcase almost right now and they will see this bug
Pavel Isel Pérez Pupo free asked 5 years ago
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
Jakub Chmura staff answered 5 years ago
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
Jakub Chmura staff answered 5 years ago
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 free 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 free 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 free commented 5 years ago
i hope this time doesn't take you 3 days to give me an answer
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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