When cursor moves horizontally, it shows two different behaviors when passing inlayHints

[brandonwie]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.73.1
• OS Version: Ventura 13.0.1

the screenshots were taken with code --disabled-extensions

A. Behavior when the cursor moves forward (left to right),

As you can see above, the cursor does not pass inlayHints instead of going to the right in front of the letter A of the second `Array`. However, when you move the cursor in the opposite direction, from right to left, it shows different behavior.

B. Behavior when the cursor moves backward (right to left),

The cursor stays in front of the letter A on the first move, but on the next move, it passes the opening bracket and it locates before the opening bracket.

Conclusion

When a cursor moves horizontally, the cursor ignores text that is placed right after the inlay hints.

from the screenshots
left to right: letter A is ignored because it is placed right after the inlay hint
right to left: the opening bracket is ignored because it is also placed right after the inlay hint

Suggestions

• the inlay hints are literally the 'hints' not 'texts' so the cursor should not be blocked by it as you can observe in case A (the behavior in case B should apply to the A case)

Steps to Reproduce:

1. turn on inlayHints options by putting these lines in settings.json of your VSCode

{
  // js ts type annotations
  "javascript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
}

2. create test.(js | ts) file
3. write any function that has parameters and return value
4. you see inlayHints displayed
5. put your cursor before or after the inlayHints and move your cursor
6. observe how it behaves differently while moving the cursor left and right horizontally

[hediet]

This is by design - we wanted the cursor to behave the same with and without inlay hints.

[jrieken]

@hediet I have to agree with @brandonwie that this is confusing and we should at least consider an option for this

[brandonwie]

@hediet @jrieken thank you so much for the comments
I think the "design" can be categorized in two different ways, if I may, either it is conceptual or functional.

In a conceptual way, the cursor behaves the same way with the inlayHints as "When a cursor moves horizontally, the cursor ignores text that is placed right after the inlay hints."
It totally makes sense that a function(in this case, cursor and inlay hint) returns the same output(behavior) when the inputs(a cursor passing an inlay hint) are the same. (but maybe if the function's returning concept has one more condition, "the inlay hint should not be treated as text", then maybe we can see it from a different angle)

However, in a functional manner(user's perspective), it can be very confusing as jrieken mentioned. One of the reasons is that when the cursor passes the inlay hint from left to right, it gives me the impression that the inlay hint is treated as text because the cursor stops in front of it. I truly love and use this brilliant feature every single day, and the behavior was one of the things I need to endure to use the feature. However, after months, I have come to a point where I want to raise my hand and ask you guys if there is any chance that the behavior can be changed in a more practical manner.

I'm more than happy to know the fact that it was by design. Either way, I'll keep using it. 😁
Thanks a lot.

[cosmicethics]

@brandonwie I fully support your viewpoint, it is well-reasoned and convincing.

Suggestions
the inlay hints are literally the 'hints' not 'texts' so the cursor should not be blocked by it as you can observe in case A (the behavior in case B should apply to the A case)

Your suggestions will fix this:

Set the cursor shape to block(the same as the normal mode in Vim), when the cursor moves forward (left to right), it can stop in inlay hint.

Although the current design should be well thought out, it wouldn't hurt to give users an additional option.
In any case, I am grateful to the developers of VSCode for their contributions, giving developers a free and powerful development tool.

[andreasvh-conceto]

Hi @jrieken @hediet

Could this be related to this issue?
#226515 (comment)

The PR from @NriotHrreion is already there to be reviewed since several months related to the confusing and unacceptable behaviour of the block cursor with active inlay hints. Maybe it will also fix this issue here, which is also 2 years old.

@NriotHrreion provided a fix for that. Would appreciate to be merged soon or at least a statement when we can expect this to be fixed.

Thanks a lot and best regards.
Andreas