Cursor appears to be inside input, when it is technically not.

[danielwlemmon]

Describe the bug A clear and concise description of what the bug is. When a user clicks on closer to the edge of an input a cursor is placed just outside of the actual input element (at the span?) making it look like the user can enter text, but not characters show.

To Reproduce Steps to reproduce the behavior:

1. Click on close to the beginning or end of an input and try to type.
2. See screen grab above.

Current behavior A clear and concise description of what is currently happening. A rux-input becomes something like this at render

I suggest for the span, onFocus redirects the focus to the input.

Expected behavior A clear and concise description of what you expected to happen. A user should be able to click within the visual border of the input and begin to type Screenshots If applicable, add screenshots to help explain your problem.

CodeSandbox If applicable, please provide a CodeSandbox or other online code editor tool link that contains an example of the bug. in addition to the gif above can't input text with cursor here here: can input text with cursor here

Environment (please complete the following information):

Chrome Version 128.0.6613.138 (Official Build) (64-bit) issue present here: https://astro-components.netlify.app/?path=/docs/forms-input--invalid and in our angular app

Additional context Add any other context about the problem here.

[kiley-mitti]

Hi @danielwlemmon thank you for bringing this to our attention! I think I understand what is happening here, but can you confirm something for me? Is the 'Navigate pages with a text cursor' setting enabled in Chrome? To find out, in Chrome go to Settings > Accessibility and it should be the 4th option down. (Just want to make sure that I'm recreating the issue properly.) Thanks!

[danielwlemmon]

yes, it is enabled

[kiley-mitti]

Hi @danielwlemmon we've diagnosed the problem and put in a fix for next release. If you need a fix immmediately try adding this css to your project:

rux-input::part(input-field){
user-select: none;
}

rux-input::part(input){
user-select: auto;
}

This should remove the cursor from the spaces around the input while not effecting the input itself.

Thanks again for bringing the issue to us!

[danielwlemmon]

Thanks a bunch!