Keyboard Event Listener not working with text-field component?

[bensgith]

Describe the bug

I'm new to TypeScript. I'm trying to learn it and build my VS Code extension basing on this sample https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/default/weather-webview

I was trying to add a tiny feature: When finished typing in location text field, I can just press "Enter" to check the weather. No need to use mouse to click "Check" button.

But looks like it did work with the function addEventListener("keydown", myFunction);

Here is my only change on src/webview/main.ts file:

function main() {
  // other existing code...
  const locationTextField = document.getElementById("location") as TextField;
  locationTextField.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      checkWeather;
    }
  });
  // other existing code...
}

To reproduce

1. git clone https://github.com/microsoft/vscode-webview-ui-toolkit-samples.git to down the repo
2. Use VS Code to open the directory vscode-webview-ui-toolkit-samples\default\weather-webview
3. npm install to download dependencies and libraries
4. Add the code snippet as I described in the description section above
5. npm run compile to compile the code
6. Try it in the webview Window -> Explorer -> Weather

Expected behavior

When finished typing in location text field, I can just press "Enter" to check the weather. No need to use mouse to click "Check" button.

Current behavior

Not working or showing any error

Screenshots

Desktop (please complete the following information):

• OS Version: Windows 10
• Toolkit Version: v1.3.1

Additional context

[bensgith]

Sorry, please forget about this issue.

I just found that I missed the () at the end of called function checkWeather. It works now after I put it back as checkWeather();

[hawkticehurst]

Nice! Happy to hear you figured it out!