Input into Panel Library causes keyboard shortcuts to activate

[eds8531]

Type: Bug

I have used the panel library to create a chatbot that works in a VSCode notebook. Panels creates boxes of text showing what the user and chatbot have said and at the bottom of these is another box where users can input their responses to the chatbot.

The issue I'm having is that when the user inputs text into the chat box certain keystrokes are triggering VSCode shortcuts. Here is a list of what is happening:

'a' jumps the focus to the previous cell. 'b' takes the user to the next cell. 'f' activates the find feature. 'j' also takes the user to the next cell. 'k' previous cell. 'o' collapses outputs (and thus the chatbot). etc...

Here is the code for the function that is causing the problem:

panels = []

job = pn.widgets.TextInput(name="Job", value="Deputy Chief Marketing Officer")
company = pn.widgets.TextInput(name="Company", value="University of Illinois Urbana-Champaign")
requirements = pn.widgets.TextInput(name="Requirements", value="""
Assist in managing the College’s brand identity and ensure consistency across all materials and channels.
Analyze and report on the effectiveness of marketing programs and make recommendations for continuous improvement.
Work closely with the Director of Insights and Strategy in determining needs for primary and secondary research and analysis to identify trends, opportunities, etc.
Assist in the development and management of the marketing budget for Marcom and other units across the College.
Other duties as assigned.""")

context = [ {
    "role": "system",
    "content": f"""
        Your background:
            You are a hiring manager ChatBot for company {company} interviewing \
            a potential hire for the position of {job}. \
            Your name is Gary. \
        Rules to follow:
            For the whole conversation, please ask only one question per text box. It is important to avoid asking multiple questions in a single text box. \
            If you use more than one question mark in a text box, you have made a mistake. \
            Don't ask one question and then say "additionally" or "also" and ask another question. \
            For the whole conversation, only ask one question per text box. \

        How the conversation should go:
            Intro:
            You first greet the candidate and thank them for meeting with you, \
                tell them a little about the job they will be interviewing for \
                then ask them to introduce themselves. \
            You then ask them to tell you about their experience and why they are \
                interested in the position. Only ask one or two questions like this.\
            Requirements:
                You then start asking them questions about the job requirements in {requirements}. \
                Pick two of the requirements. \ 
                Ask one question for each of the two requirements you picked: 
                    one hypothetical and one behavioral. \
                Behavioral questions ask the candidate to describe a past experience \
                    An example of a behavioral question is "Tell me about a time when you developed and executed a marketing strategy." \
                Hypothetical questions ask the candidate to describe how they would handle a 
                    hypothetical situation \
                    An example of a hypothetical question is "How would you develop and execute a \
                    marketing strategy?" \
                After each of these questions as only one follow up question. \
                Ask these follow up questions one at a time. \
                    The follow up questions should be about areas where the candidate could have been more specific about the situation, task, action, or result in their answer to the original question. \
                These followup questions should be clarifying questions or questions that ask the candidate to elaborate on their answer. \

            End:
                Once you're finished asking about the job requirements, ask the candidate if they have any questions for you. \
                If they do, answer their questions. \
                If they don't, thank them for their time and end the interview. \   
            """.format(company=company, job=job, requirements=requirements)

}]

inp = pn.widgets.TextInput(value="Hi", placeholder='Enter text here…')
button_conversation = pn.widgets.Button(name="Chat!")

interactive_conversation = pn.bind(collect_messages, button_conversation)

pn.extension(scroll=True)

dashboard = pn.Column(
    interactive_conversation,
    inp,
    pn.Row(button_conversation)
)
dashboard.servable()```

I have no idea why this is happening. This code works fine in Jupyter Notebooks.

Steps to reproduce:

Step 1: Open notebook
Step 2: Run the code cells
Step 3: Start typing in the chatbot panel
Step 4: Notice that certain keystrokes activate the above shortcuts.

Expected behavior: I expect to be able to type in the chatbot panel and hit chat without shortcuts being activated.

VS Code version: Code 1.81.0 (Universal) (6445d93c81ebe42c4cbd7a60712e0b17d9463e97, 2023-08-02T12:40:02.782Z)
OS version: Darwin x64 22.5.0
Modes:

<details>
<summary>System Info</summary>

|Item|Value|
|---|---|
|CPUs|Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz (12 x 3200)|
|GPU Status|2d_canvas: enabled<br>canvas_oop_rasterization: disabled_off<br>direct_rendering_display_compositor: disabled_off_ok<br>gpu_compositing: enabled<br>metal: disabled_off<br>multiple_raster_threads: enabled_on<br>opengl: enabled_on<br>rasterization: enabled<br>raw_draw: disabled_off_ok<br>video_decode: enabled<br>video_encode: enabled<br>vulkan: disabled_off<br>webgl: enabled<br>webgl2: enabled<br>webgpu: enabled|
|Load (avg)|3, 2, 2|
|Memory (System)|16.00GB (1.64GB free)|
|Process Argv|--crash-reporter-id a2fa6ed6-425c-4677-b27e-f26e13a82e7e|
|Screen Reader|no|
|VM|0%|
</details><details><summary>Extensions (18)</summary>

Extension|Author (truncated)|Version
---|---|---
gitignore|cod|0.9.0
flask-snippets|cst|0.1.3
copilot|Git|1.101.328
copilot-chat|Git|0.7.2023081101
vscode-pull-request-github|Git|0.71.2023081016
vscode-docker|ms-|1.26.0
black-formatter|ms-|2023.4.1
isort|ms-|2023.10.1
python|ms-|2023.14.0
vscode-pylance|ms-|2023.8.20
jupyter|ms-|2023.7.1002162226
jupyter-keymap|ms-|1.1.2
jupyter-renderers|ms-|1.0.17
vscode-jupyter-cell-tags|ms-|0.1.8
vscode-jupyter-slideshow|ms-|0.1.5
remote-containers|ms-|0.304.0
atom-keybindings|ms-|3.3.0
LiveServer|rit|5.7.9

(8 theme extensions excluded)

</details><details>
<summary>A/B Experiments</summary>

vsliv368cf:30146710 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263cf:30335440 vscorecescf:30445987 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 pythonvs932:30410667 vsclangdf:30486550 c4g48928:30535728 dsvsc012cf:30540253 pynewext54:30695312 azure-dev_surveyone:30548225 vscccc:30803845 2e4cg342:30602488 89544117:30613380 a9j8j154:30646983 showlangstatbar:30737416 vsctsb:30748421 03d35959:30757346 pythonfmttext:30731395 pythoncmv:30756943 f8hc8238:30694864 fixshowwlkth:30771522 showindicator:30805244 pythongtdpath:30769146 i26e3531:30792625 gsofb:30804716 pythonnosmt12:30797651 pythonidxpt:30805730 pythonnoceb:30805159 dsvsc013:30795093 dsvsc014:30804076

</details>

<!-- generated by issue reporter -->

[VSCodeTriageBot]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.81.1. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[eds8531]

I have updated vscode and the problem persists

[amunger]

I think your sample code is missing the import statement for what the pn package actually is, so I'm not able to run it. Could you post a screenshot of where the input box is located?

Typing in an input box within the cells output should work correctly with the latest jupyter keymap extension because of the !notebookOutputInputFocused condition in the when clause for those hotkeys.

[VSCodeTriageBot]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!

[andreamah]

Removing the milestone since there was no fix here.