Topic: MDBAutocomplete loose content when Enter key is pressed on MDBSelect
fbischoff free asked 5 years ago
Hi,
I notice a strange behavior that I want to get rid of. In my page, I have (among other components) one MDBSelect and one MDBAutocomplete. I want to disable the possibility of selecting an item of the MDBSelect with "Enter" on the keyboard. When I do so (pressing the "Enter" key while the MDBSelect is open), it empties the content of the MDBAutocomplete.
Any idea why ?
Regards.
<MDBRow>
<MDBCol md="12">
<MDBAutocomplete className="text-uppercase" label={uiElements.title} clear value={this.state.title} data={uiElements.titles} getValue={value => this.getTitle(value)} />
{renderTitleError}
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="12">
<MDBRow>
<MDBCol md="4">
<MDBSelect getTextContent={value => this.getArtistDetailValue(value)}>
<MDBSelectInput selected={uiElements.chooseOption} />
<MDBSelectOptions search searchLabel="Rechercher">
<MDBSelectOption disabled>{uiElements.chooseOption}</MDBSelectOption>
{uiElements.actorsType.elements.map(typeActeur => {
return (
<MDBSelectOption value={typeActeur.value}>{typeActeur.name}</MDBSelectOption>
)
})}
</MDBSelectOptions>
</MDBSelect>
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
Suresh Varma free answered 4 years ago
I too facing same issue, i.e on enter key, it empties the content of the MDBAutocomplete search result. For example refer the below link and see by clicking enter after trying 1 or 2 letters. Please advise why MDBAutocomplete is behaving like this on Enter key.
https://mdbootstrap.com/snippets/jquery/temp/2641481?action=prism_export#html-tab-view
Konrad Stępień staff answered 5 years ago
Hi @fbischoff,
I want to disable the possibility of selecting an item of the MDBSelect with "Enter" on the keyboard.
How do you do that? I mean, how the function works.
And do you did try to use controlled select
in your project? It even seems to fit more into your project. Try this code. I try to use your code and I don't have this problem, but I do not have your data and all functions.
I think if you use controlled select
the problem should disappear, please check it. If no, you can show me your problem on git or something webpage? Video is also a good idea. But first, try controlled select
.
Best, Konrad.
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.13.0
- Device: Desktop
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No