Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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


Piotr Glejzer staff commented 4 years ago

Are you using jquery or react?


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.



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

  • 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