Textbox style widgets have unexpected behavior with JupyterLab 4

[divyansshhh]

ALL software version info

Panel v1.3.0

Description of expected behavior and the observed behavior

Create and run the following snippet in a notebook in JupyterLab 4 -

import panel as pn
pn.extension()
text_input = pn.widgets.TextInput(name='Text Input', placeholder='Enter a string starting with "A" or "B" here...')
text_input

When a character like 'A' is pressed (which is also a JupyterLab shortcut for "create cell above current cell"), we observe that the JupyterLab shortcut gets triggered and the textbox doesn't receive the input.

Screenshots or screencasts of the bug in action

[krassowski]

This is related to a change in JupyterLab 4.1. Previously the focus in "command mode" would be placed on the notebook HTML node, which was causing unexpected scrolling when navigating with keyboard and made the notebook inaccessible because the tabindex was lost after every cell operation.

In JupyterLab 4.1 this was fixed with cells retaining the focus even when their editor is not focused (jupyterlab/jupyterlab#14115). However this meant that shortcuts such as insert cell above (A) or insert cell below (B) needed to targeted individual cells rather than a focused notebook node. To prevent this from the exact thing that we see in this issue the selectors for commands were modified, e.g. .jp-Notebook:focus.jp-mod-commandMode → .jp-Notebook.jp-mod-commandMode :focus:not(:read-write) (as documented in extension migration guide, here)

The problem with with panel appears to be that the widget is nested in shadow DOM hence the :focus:not(:read-write) does not work. This might requires a change in JupyterLab itself.

[philippjfr]

Really appreciate you chiming in here @krassowski. Let us know if that fix is something we can help with.

[krassowski]

Thank you! We merged a fix on JupyterLab side 9jupyterlab/jupyterlab#15774) and will release it in 4.1.2. A workaround in the meantime would be to wrap the output in a container with data-lm-suppress-shortcuts="true".

[philippjfr]

Thank you so much!

A workaround in the meantime would be to wrap the output in a container with data-lm-suppress-shortcuts="true".

Could I just apply this in the top-level div or would it have to be inside each shadow root?

[krassowski]

I think top level should work. I do not recommend it long term though as users may expect some of the shortcuts to work anyways (and JupyterLab fix will be out on Monday).

[philippjfr]

Since this was fixed upstream and applying the shortcut override has potential unintended consequences I will close this and suggest users upgrade JupyterLab.

[ahuang11]

For people experiencing the same issue, try upgrading pip install "jupyterlab>=4.1.5". If it still persists, try another browser.