Notebook Renderer: textbox events are intercepted

[danmarshall]

Type: Bug

I've added a textbox to a Notebook Renderer. Some keystrokes are intercepted and are unable to be handled by the custom textbox, such as M (convert cell to markdown) and enter etc. I would like to be able to add text (including command keystrokes) in my own textbox when it is focused.

Here is my fork/branch of the vscode-github-issue-notebooks example:
https://github.com/danmarshall/vscode-github-issue-notebooks/tree/quickreply

VS Code version: Code - Insiders 1.73.0-insider (f4c58486f4a33b8c61f30a244374ef0d27dc19c3, 2022-10-11T05:17:54.676Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: Yes

System Info

Item	Value
CPUs	11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz (8 x 3302)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	31.84GB (17.71GB free)
Process Argv	--crash-reporter-id 086b2b56-06d7-413a-9089-87973cdf2eaa
Screen Reader	no
VM	0%

Extensions (11)

Extension	Author (truncated)	Version
tsl-problem-matcher	amo	0.6.2
vscode-eslint	dba	2.2.6
gitlens	eam	13.0.3
isort	ms-	2022.3.12931038
python	ms-	2022.17.12911022
vscode-pylance	ms-	2022.10.31
jupyter	ms-	2022.10.1102931121
jupyter-keymap	ms-	1.0.0
jupyter-renderers	ms-	1.0.10
vscode-jupyter-cell-tags	ms-	0.1.6
vscode-jupyter-slideshow	ms-	0.1.5

A/B Experiments

vsliv695:30137379
vsins829:30139715
vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vstes627:30244334
vslsvsres303:30308271
pythonvspyl392:30422396
pythontb:30258533
pythonptprofiler:30281269
vshan820:30294714
pythondataviewer:30285072
vscod805:30301674
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593cf:30376535
pythonvs932:30404738
cppdebug:30492333
vsclangdf:30492506
c4g48928:30535728
dsvsc012:30540252
pylantcb52:30590116
pyind367:30587847
vsccc:30564266
pyindex848:30577858
nodejswelcome1:30587009

[rebornix]

We should add output focus into the when clause.

[danmarshall]

workaround:

 textbox.onkeydown = e => e.stopPropagation();

Will this disable the "when" clause?

[gorj-tessella]

I have encountered the same issue. Adding workarounds every time I use a widget would be a hassle, and means I would be programming for both vscode and regular jupyter notebooks.

[rebornix]

This issue should be fixed now in latest Jupyter extension on VS Code 1.76+, @gorj-tessella @danmarshall can you help confirm?

[danmarshall]

There are still some strange focus issues, I'm not sure if these are related to this issue.

Recording.2023-03-31.152221.mp4

[amunger]

I was finally able to play around with this. It looks jumpy in the gif, but I think that's expected based on the behavior defined in the quickreply branch - the text box stays visible while the input has focus, and once the focus is lost, it hides and that changes the size of the output element. With the different size, your now hovered over the next element, so it becomes visible as well.

So it's just due to the fact that showing and hiding the extra content will change the height and placement of the outputs.

[connor4312]

I tried the sample posted in the original issue. When in an input, the "m" key works fine, but the "a" key adds a new cell.

[amunger]

interesting - when focusing on an input box within rendered GH issues, the document.activeElement is the output div, whereas with builtin output renderers, it is the <input> as expected