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

[material-ui][InputBase] Text cursor jumps several lines up when inserting text fragment with new line at the end. #45148

Open
Lastik opened this issue Jan 29, 2025 · 4 comments
Assignees
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@Lastik
Copy link

Lastik commented Jan 29, 2025

Steps to reproduce

Steps:

  1. Open this link to live example: Codesandbox
  2. Type several lines of text to the InputBase text field. Your text cursor should be at the new empty line in the very end of the field.
  3. Paste this text block at the end to the text field (including the empty line) several times in a row.
abc def abc def abc def

Current behavior

You should see that text cursor is not at the last empty line of the input anymore.

Image

Expected behavior

Text cursor should still be at the last empty line of the input, because we are inserting to the end of it.

Context

This is basic usage of the component without any complex configurations or customizations.

Your environment

npx @mui/envinfo
  Browser Used: 
    Chrome
  System:
    OS: macOS 13.5.1
  Binaries:
    Node: 20.3.0 - /opt/homebrew/bin/node
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 132.0.6834.159
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.2 
    @mui/material: 6.4.1 => 6.4.1 
    @mui/private-theming:  6.4.2 
    @mui/styled-engine:  6.4.2 
    @mui/system:  6.4.2 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.2 
    @types/react:  19.0.8 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.1.3 => 4.1.3 

Search keywords: InputBase, material-ui, multiline, text cursor

@Lastik Lastik added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 29, 2025
@zannager zannager added the component: text field This is the name of the generic UI component, not the React module! label Jan 30, 2025
@DiegoAndai DiegoAndai added bug 🐛 Something doesn't work ready to take Help wanted. Guidance available. There is a high chance the change will be accepted and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 31, 2025
@DiegoAndai
Copy link
Member

Thanks for the report @Lastik! I can confirm this is a bug. It seems to be present in v5 as well as v6.

I added the ready to take label in case anyone wants to work on this before the team gets to it. Please reach out if you're interested, I'll gladly guide you.

@yermartee
Copy link

Hi @DiegoAndai I would like to work on this issue.

@suhel4code
Copy link

Wanted to take on this

@DiegoAndai
Copy link
Member

Hi @yermartee, go ahead! Feel free to let me know if you need any help. Thanks in advance.

@suhel4code, thanks for the interest; I will assign this one to @yermartee, as he asked first. I'll gladly guide you in other ready to take issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Development

No branches or pull requests

5 participants