Popup when someone marks something

[IamGroot212]

Product and Version [VS/VSCode]: Most recent
OS Version[macOS/Windows]: macOS Sonoma 14.4
Live Share Extension Version: v1.0.5905

Steps to Reproduce / Scenario:

1. When my friend in Live Share marks sth there is a popup like u can see below in the screenshot. I really don't know where it comes from. It's extremely disturbing cause it is a text input and it takes the focus. So it always takes me there.

Please attach logs to this issue:

logs.zip

Screenshots

[derekbekoe]

That popup does not appear to be coming from Live Share.
Can you share the list of extensions you have installed and when you started seeing the issue?
This may help to narrow down which extension is causing that UI to show up.

[IamGroot212]

Like the guy mentioned in #5032 I am also working on a vue/ TypeScript project.

Relevant Extensions for this project are probably the following:

JavaScript and TypeScript Nightly
npm inetellisense
Vue Official
Vue Snippets - hollowtree
AutoImport - steoates
Auto Rename Tag - Jun Han
Error Lens - Alexander
htmltagwrap - Brad Gashler

Maybe you can figure something out. Im going to start to disable all extensions, so i might be able to find the one relating this issue.

[richmondjoy]

Our team is also experiencing this on a vue/TypeScript project, though it doesn't seem to be limited to when both people are typing. It is only occurring on the host's IDE, and only while in Read/Write mode, not in ReadOnly mode. It is making LiveShare unworkable.

Extensions:
Vue Official
Tailwind CSS Intellisense
ESLint
Prettier
Prettier ESLint
PostCSS Language Support
CSS Variable Autocomplete

[derekbekoe]

The extension in common is "Vue Official" extension.
Looking at the changelog, a new 2.x.x version of the extension was released on 2024-03-02 (earlier this week).
Since then, there have been many issues opened against the extension in the last few days.
This comment on one of the issues provides steps to downgrade to a 1.x.x version of the extension.

Hopefully that resolves your issue but it doesn't seem to be caused by Live Share.

[johnsoncodehk]

When the user selects HTML code in the SFC template and executes the Extract into new dumb component command, the Vue extension client will intercept the refactor.move.newFile.dumb command and pop up a popup naming the new component. This is behavior that exists since v1.x.

Does one client executing Extract into new dumb component cause all connections to execute the middleware code? (Please let me know if I can help with this issue.)

https://github.com/search?q=repo%3Avuejs%2Flanguage-tools%20refactor.move.newFile.dumb&type=code

[xollaborator]

@johnsoncodehk it seems that something else is triggering this behaviour. Here is my reproduction:

1. I open in VS Code a random vue file and move my cursor somewhere into script setup where I could write code in TS.
2. I start Live Share (Read/Write) and open the link in the browser.
3. I log in as myself using github there.
4. Session is joined and in the browser I see that only 2 extensions were installed Prettier and Vue - Official.
5. I come back to my host instance of VS Code, type a character and within a second the popup appears.

I do not need to do anything else like selecting any code or executing a command so there is something else that is triggering this refactor. In non-vue file the IntelliSense popup appears and stays, while in vue files it is quickly closed and the popup appears.

[richmondjoy]

Reverting the Vue - Official extension to v1.8.27 resolved the issue for our team.

[johnsoncodehk]

@johnsoncodehk it seems that something else is triggering this behaviour. Here is my reproduction:

1. I open in VS Code a random vue file and move my cursor somewhere into script setup where I could write code in TS.
2. I start Live Share (Read/Write) and open the link in the browser.
3. I log in as myself using github there.
4. Session is joined and in the browser I see that only 2 extensions were installed Prettier and Vue - Official.
5. I come back to my host instance of VS Code, type a character and within a second the popup appears.

Thank you for your explanation. As far as I know, step 5 is incorrect. It should be triggered when selecting a piece of code in the <template> on the browser side.

I have thought of two ways to solve this problem.

• On the VSCode/Live Share side: Currently, we are eagerly resolving the code action regardless of whether the client side has selected a code action. Ideally, we should only execute the resolve code action when the user clicks on a code action.

• On the Vue extension side: I hope to determine if the Live Share server is running by using a method similar to await vscode.commands.executeCommand('getContext', 'liveshare:state') === 'Shared' (currently not possible, see https://github.com/Lift setContext from a command to proper API vscode#10471). If it is, then skip the input box.

[xollaborator]

@johnsoncodehk I see that none of those options is possible in near future so I appreciate that you've added vue.codeActions.askNewComponentName setting to turn off the feature. I've just check that after disabling the option I no longer get the popup with version 2.0.11 so thank you for this workaround.

While I see much bigger value in pair/mob programming than in easy component extraction I hope that at some point VSCode/Live Share team will provide a solution that is not limiting capabilities for Vue ecosystem and will let you implement the proper solution for this issue.

I wish you all the best :)