mui
[text field] Inconsistent caret position on focus when clicking outside input element
Steps to reproduce
Steps: On a Textfield, if there is a value, clicking outside the input html element give the focus to the textfield, but the caret position is a the beginning.
For example if you click here:
The caret will be positioned before the text.
Current behavior
Search keywords: textfield, carret
@felix-fuin Can you share a screen recording on how to reproduce it? I am not able to reproduce it.
@felix-fuin Can you share a screen recording on how to reproduce it? I am not able to reproduce it.
Using the latest version of Chrome with the latest documentation version of MUI
https://github.com/user-attachments/assets/98850ccb-df61-406f-80d6-e889d831a5cf
Hello @mj12albert, I'd like to work on this issue.
Root Cause
The caret positioning issue occurs because padding is applied directly to the <input> element. When clicking in the padded area, the click doesn't land directly on the input, so the browser can't determine the caret position and defaults to position 0.
Evidence
| Current Behavior | Fixed Behavior |
|---|---|
| 🔗 CodePen Demo - Issue Try clicking on the padded area of input - caret goes to position zero |
🔗 CodePen Demo - Fix Instead of applying padding directly to input, apply padding to wrapper - this fixes the caret positioning |
Proposed Solution
Move the padding from the input element to the wrapper/root container. This ensures:
- ✅ The input fills the entire clickable area (no padding gaps)
- ✅ All clicks in the padded area hit the input directly
- ✅ The browser's native caret positioning works correctly
Verified: I've tested this fix by removing padding from the input element in browser DevTools, and the caret positioning works as expected.
Should I go ahead with implementing this fix?
