Repository: TypeScript
Issue: Unexpected behaviors in attribute completions of JSX/TSX
Labels: Suggestion,Needs Proposal

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: Yes

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported directly to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->
- VS Code Version: 1.75.1
- OS Version: Mac OS 13.1

Steps to Reproduce:
1. Set the JSX attribute completion style of typescript to braces
2. Create a `.tsx` file with the following content
```tsx
export default function Sample(props: {}) {
    return <div
        
    > </div>
}
```
3. for the div tag add a `onClick` callback with the following key strokes:
3.1. `oncl` then `enter`
3.2. `e => {` then `enter`
3.3. `e.st` then `enter`

You can see the uploaded the gif below

![Screen Recording 2023-02-11 at 12 01 52 PM](https://user-images.githubusercontent.com/17789994/218245581-b94dbefb-b86d-4379-91cf-e9eddaa10f9e.gif)


In JSX/TSX, there is an autocompletion for the attributes. When you select a suggested completion, a braces is opened and the cursor is placed in between in highlight mode, like the image below.

![Screenshot 2023-02-11 at 12 33 29 PM](https://user-images.githubusercontent.com/17789994/218245681-bfd7faf5-696b-4ded-ad28-ca13104cb21c.png)

The existence of this highlight mode does not provide any value to the user. If you start typing in this highlight mode, the suggested codes are not selected (unlike the normal mode where the first suggested is selected and will be inserted when pressing `enter`) and if you want to come out of the highlight mode while typing, you have to press `esc` once to close the suggestion prompt and a second time to close the highlight mode.

In the above example, you would expect the editor to preselect the first suggestion (`e.stopPropagation`) and is inserted when pressing `enter` but since the code is in highlight mode, you have to press the down cursor to select the suggestion. If you don't select it manually, pressing `enter` adds a line break.

After using the jsx attribute completion from the day it was released, I haven't found any reason or use case for the highlight mode after code completion. My suggestion is that after the attribute is completed, the cursor would be placed between the braces in normal mode not in highlight mode.

P.S. I don't know what is the name used internally for the highlight mode (searched, but couldn't find), so if I'm wrong please correct me.