From d9ff4f981bdd23bb906782ef544f214307b1328c Mon Sep 17 00:00:00 2001
From: Haneen Abdo <Haneen@Admins-MacBook-Pro-4.local>
Date: Fri, 21 Jun 2024 14:40:55 -0400
Subject: [PATCH] Added enter handler for textbox

---
 ide/tsconfig.json      |  4 ++++
 py/examples/textbox.py |  2 ++
 ui/src/textbox.tsx     | 10 ++++++++++
 3 files changed, 16 insertions(+)

diff --git a/ide/tsconfig.json b/ide/tsconfig.json
index b88e726380..eacb40c8d1 100644
--- a/ide/tsconfig.json
+++ b/ide/tsconfig.json
@@ -12,8 +12,12 @@
 		],
 		"types": [],
 		"baseUrl": "./node_modules",
+		"paths": {
+			"@fluentui/react": ["node_modules/@fluentui/react"]
+		  },
 		"jsx": "preserve",
 		"esModuleInterop": true,
+		"include": ["src", "node_modules/@types"],
 		"typeRoots": [
 			"node_modules/@types"
 		]
diff --git a/py/examples/textbox.py b/py/examples/textbox.py
index b50b313168..fc36aec88c 100644
--- a/py/examples/textbox.py
+++ b/py/examples/textbox.py
@@ -25,6 +25,7 @@ async def serve(q: Q):
             ui.text(f'textbox_numeric={q.args.textbox_numeric}'),
             ui.text(f'textbox_tel={q.args.textbox_tel}'),
             ui.text(f'textbox_password={q.args.textbox_password}'),
+            ui.text(f'textbox_one_enter={q.args.textbox_on_enter}'),
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
@@ -46,6 +47,7 @@ async def serve(q: Q):
             ui.textbox(name='textbox_numeric', label='With numeric keyboard (iOS, Android)', type='number'),
             ui.textbox(name='textbox_tel', label='With telephone keyboard (iOS, Android)', type='tel'),
             ui.textbox(name='textbox_password', label='Password', password=True),
+            ui.textbox(name='textbox_on_enter', label='Press Enter after typing', on_enter=True),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])
     await q.page.save()
diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index 664f50ea78..c5df487025 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -67,6 +67,8 @@ export interface Textbox {
   spellcheck?: B
   /** Keyboard to be shown on mobile devices. Defaults to 'text'. */
   type?: 'text' | 'number' | 'tel'
+  /**T rue if the Enter button is being pressed */
+  onEnter?: B
 }
 
 const DEBOUNCE_TIMEOUT = 500
@@ -83,6 +85,13 @@ export const
         setValue(v)
         m.value = v
       },
+      onKeyDown = (event: React.KeyboardEvent) => {
+        if(m.onEnter && event.key == 'Enter'){
+          event.preventDefault()
+          wave.args[m.name] = value
+          wave.push()
+        }
+      },
       textFieldProps: Fluent.ITextFieldProps & { 'data-test': S } = {
         'data-test': m.name,
         label: m.label,
@@ -92,6 +101,7 @@ export const
         disabled: m.disabled,
         readOnly: m.readonly,
         onChange,
+        onKeyDown,
         iconProps: m.icon ? { iconName: m.icon } : undefined,
         placeholder: m.placeholder,
         prefix: m.prefix,