Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Demos] Multiline Autocomplete #13936

Closed
RoiEXLab opened this issue Dec 18, 2018 · 0 comments
Closed

[Demos] Multiline Autocomplete #13936

RoiEXLab opened this issue Dec 18, 2018 · 0 comments
Labels
component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@RoiEXLab
Copy link

Hi, after migrating a project from 0.20.1 to the most recent version of material-ui I noticed a small number of minor issues with the (otherwise awesome) auto complete demo.

I decided to go with the react-autosuggest tutorial (the issue I'm about to describe will probably affect the other versions too, at least to some degree), because it's the most lightweight dependency of all 3 options.
It works, which is great but here are the issues (I haven't been able to fix myself so far) that I have noticed that occur once the internal TextFields multiline prop gets set to true, that I like to see fixed in the provided demos:

  1. The MenuItem doesn't really render line breaks \n which makes sense and can be worked around by splitting the string on line breaks, and putting
    tags between the individual elements, but really should be supported by the demo.
  2. When using arrow keys to select an entry and pressing enter, this works, but also inserts a newline in the generated text area and under certain circumstances re-opens the suggestions display when there are matching items.
  3. Not really your fault, but moving the cursor inside a textarea using the arrow up and down is not possible when no suggestions are displayed, I'm assuming this is due to react-autosuggest consuming the event in order to select the suggestions.

Unrelated to that I also noticed that the Suggestions are rendered behind a dialog when the autocomplete component is inside a dialog (using popper). This should be fixable by setting the container prop of the Poopper to the dialog container instead of document.body.
As a workaround I used a zIndex of 1400 to display it in front of the 1300 dialog.

I know this is much to ask for, especially because you don't really control the external dependencies, so I'd be happy to help out on some things if you can nudge me in the right direction.

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 20, 2022
@zannager zannager added component: autocomplete This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

3 participants