Unexpected behaviors in attribute completions of JSX/TSX

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

• 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

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

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.

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.