Cannot paste content to input field

[hannah-hyj]

In the Deep Links tab embedded in the IDE, you can’t paste into the path text field.

There is an existing issue for clipboard copy in vs code https://github.com/Dart-Code/Dart-Code/issues/4540 and its solution: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/config_specific/copy_to_clipboard/copy_to_clipboard.dart#L15-L24

But there is not a workaround for paste from clipboard

[DanTup]

I can't reproduce this not working completely, but while testing it I did see what I think is https://github.com/flutter/flutter/issues/142040, where focus does not move correctly when you interact with the DevTools window.

Once I actually get focus into DevTools correctly, things seem to work correctly:

https://github.com/flutter/devtools/assets/1078012/ed905363-c63b-493d-9e96-a5a2223b6e9b

If this is the same issue you're seeing, then I think it's a Flutter issue and may be fixed along with https://github.com/flutter/flutter/issues/142040.

[hannah-hyj]

Even if i do get focus into the textfield and start typing, I still cannot paste into it with command+V.

I am using the macOS, are you also using VSCode on macOS? Is it possible it's also related to the platform?

[DanTup]

You're right - I can repro on macOS.. I'll do some digging!

[DanTup]

I think this might be the same issue as https://github.com/microsoft/vscode/issues/129178. A few weeks ago I thought that issue was fixed for me, but I now realise I've moved from macOS to Windows last year 🤦‍♂️

As far as I can tell, nothing in our code is causing it. We're not hijacking any keypresses (as far as I can tell). It's possible some kind of workaround like @CoderDake did for some copying will work, but I think it would be more complicated because we'd have to ping up to VS Code and ask it to read the clipboard and then pass the content back down (this might also look kinda suspicious).

There are other key combos that don't seem to work too, like Cmd+A to select all.

[hannah-hyj]

Do you have plan to proceed this workaround? We plan to launch the deep link validator feature in next release and will have an i/o tech talk to promote it, and ideally we would like to show case this feature in vscode, it will help a lot if this can be fixed.

[DanTup]

Sorry for the delay - I'd have to do some testing to see if such a workaround would work (it's possible we're blocked from reading the clipboard). I'm not certain we'd really want to use/ship a workaround (hack) like this, but perhaps testing it will help us understand the issue better too.

[DanTup]

I did some testing of this today, but so far it's not looking like we can fix this.

I was able to capture pastes in the parent page and postMessage them over to the inner frame like this:

addEventListener("paste", (event) => {
	const pastedData = event.clipboardData.getData("text/plain");
	if (pastedData) {
		document.getElementById('myFrame').contentWindow.postMessage({command: 'paste', data: pastedData}, "*");
		console.log(\`Posted: \${pastedData}\`);
	}
});

However, the paste event isn't firing (in either frame) when you press Cmd+v. But if it was, we'd need to simulate the paste event. I tried it like this:

const clipboardData = new DataTransfer();
clipboardData.setData("text/plain", message.data);
window.dispatchEvent(new Event("paste", { clipboardData: clipboardData }))

However, although this triggers the paste handler, the clipboard data is always undefined.

I think the only way we might be able to make this work would be:

• DevTools captures Cmd+v
• DevTools postMessages up to the outer frame, and then the extension, asking to read the clipboard
• Dart-Code reads the clipboard and postMessages back to the frame, and then to DevTools
• DevTools accepts the clipboard content and then invokes some method in Flutter that triggers the paste handler (or, has some custom handling to support paste in this one specific field)

This feels really hacky. But now I'm wondering, since we have DTD and it knows the workspace roots - could the deep link tool just give the user a drop-down showing all of the packages that were found in the workspace? (@jacob314 @kenzieschmoll thoughts?). It doesn't solve the general paste issue, but I'm not sure there's going to be a reliable way to do that without a fix from VS Code.

[kenzieschmoll]

re: using DTD to populate a dropdown with workspace roots - this is something that @hangyujin and I have discussed. I filed https://github.com/flutter/devtools/issues/7366 to track this work.