Address code review

google · Sep 6, 2024 · fe09b8d · fe09b8d
1 parent ad5b33b
commit fe09b8d
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 20 deletions.
diff --git a/demo/fancy_chat.py b/demo/fancy_chat.py
@@ -558,10 +558,14 @@ def on_submit_chat_msg(e: me.TextareaShortcutEvent):
   state = me.state(State)
   state.input = e.value
   yield
-  yield from on_click_submit_chat_msg(me.ClickEvent(key=e.key, is_target=False))
+  yield from _submit_chat_msg()
 
 
 def on_click_submit_chat_msg(e: me.ClickEvent):
+  yield from _submit_chat_msg()
+
+
+def _submit_chat_msg():
   """Handles submitting a chat message."""
   state = me.state(State)
   if state.in_progress or not state.input:

diff --git a/demo/textarea.py b/demo/textarea.py
@@ -56,8 +56,8 @@ def app():
       value=s.input,
       on_blur=on_blur,
       shortcuts={
-        me.Shortcut(key="Enter"): on_submit,
-        me.Shortcut(shift=True, key="Enter"): on_newline,
+        me.Shortcut(key="enter"): on_submit,
+        me.Shortcut(shift=True, key="ENTER"): on_newline,
         me.Shortcut(shift=True, meta=True, key="Enter"): on_clear,
       },
     )

diff --git a/mesop/components/input/e2e/input_test.ts b/mesop/components/input/e2e/input_test.ts
@@ -46,7 +46,8 @@ test('test input on_blur works', async ({page}) => {
 
 test('test textarea shortcuts', async ({page}) => {
   await page.goto('/components/input/e2e/textarea_shortcut_app');
-  await page.getByLabel('Textarea').fill('hi');
+  const textbox = page.getByLabel('Textarea');
+  await textbox.fill('hi');
   await page.keyboard.press('Enter');
   await expect(await page.getByText('Submitted: hi')).toBeVisible();
 
@@ -55,18 +56,16 @@ test('test textarea shortcuts', async ({page}) => {
   await page.keyboard.up('Shift');
   await expect(await page.getByText('Submitted: hi')).toBeVisible();
 
-  await page.getByLabel('Textarea').pressSequentially('hi');
+  await textbox.pressSequentially('hi');
   await page.keyboard.press('Enter');
-  await expect(await page.getByText('Submitted: hi hi').textContent()).toEqual(
-    'Submitted: hi\nhi',
-  );
+  await expect(await page.getByText('Submitted: hi hi')).toBeVisible();
 
   await page.keyboard.down('Meta');
   await page.keyboard.press('s');
   await page.keyboard.up('Meta');
   await expect(
     await page.getByText(
-      "Shortcut: Shortcut(key='s', shift=False, ctrl=False, alt=False, meta=True)",
+      "Shortcut: Shortcut(key='S', shift=False, ctrl=False, alt=False, meta=True)",
     ),
   ).toBeVisible();
 
@@ -84,7 +83,52 @@ test('test textarea shortcuts', async ({page}) => {
   await page.keyboard.press('Escape');
   await expect(
     await page.getByText(
-      "Shortcut: Shortcut(key='Escape', shift=False, ctrl=False, alt=False, meta=False)",
+      "Shortcut: Shortcut(key='escape', shift=False, ctrl=False, alt=False, meta=False)",
+    ),
+  ).toBeVisible();
+});
+
+test('test native textarea shortcuts', async ({page}) => {
+  await page.goto('/components/input/e2e/textarea_shortcut_app');
+  const textbox = page.getByPlaceholder('Native textarea');
+
+  await textbox.fill('hi');
+  await page.keyboard.press('Enter');
+  await expect(await page.getByText('Submitted: hi')).toBeVisible();
+
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Enter');
+  await page.keyboard.up('Shift');
+  await expect(await page.getByText('Submitted: hi')).toBeVisible();
+
+  await textbox.pressSequentially('hi');
+  await page.keyboard.press('Enter');
+  await expect(await page.getByText('Submitted: hi hi')).toBeVisible();
+
+  await page.keyboard.down('Meta');
+  await page.keyboard.press('s');
+  await page.keyboard.up('Meta');
+  await expect(
+    await page.getByText(
+      "Shortcut: Shortcut(key='S', shift=False, ctrl=False, alt=False, meta=True)",
+    ),
+  ).toBeVisible();
+
+  await page.keyboard.down('Control');
+  await page.keyboard.down('Alt');
+  await page.keyboard.press('Enter');
+  await page.keyboard.up('Control');
+  await page.keyboard.up('Alt');
+  await expect(
+    await page.getByText(
+      "Shortcut: Shortcut(key='Enter', shift=False, ctrl=True, alt=True, meta=False)",
+    ),
+  ).toBeVisible();
+
+  await page.keyboard.press('Escape');
+  await expect(
+    await page.getByText(
+      "Shortcut: Shortcut(key='escape', shift=False, ctrl=False, alt=False, meta=False)",
     ),
   ).toBeVisible();
 });
diff --git a/mesop/components/input/e2e/textarea_shortcut_app.py b/mesop/components/input/e2e/textarea_shortcut_app.py
@@ -32,11 +32,11 @@ def app():
       label="Textarea",
       value=s.input,
       shortcuts={
-        me.Shortcut(key="Enter"): on_submit,
-        me.Shortcut(shift=True, key="Enter"): on_newline,
+        me.Shortcut(key="enter"): on_submit,
+        me.Shortcut(shift=True, key="ENTER"): on_newline,
         me.Shortcut(ctrl=True, alt=True, key="Enter"): on_shortcut,
-        me.Shortcut(meta=True, key="s"): on_shortcut,
-        me.Shortcut(key="Escape"): on_shortcut,
+        me.Shortcut(meta=True, key="S"): on_shortcut,
+        me.Shortcut(key="escape"): on_shortcut,
       },
     )
 
@@ -46,11 +46,11 @@ def app():
       autosize=True,
       min_rows=5,
       shortcuts={
-        me.Shortcut(key="Enter"): on_submit,
-        me.Shortcut(shift=True, key="Enter"): on_newline,
+        me.Shortcut(key="enter"): on_submit,
+        me.Shortcut(shift=True, key="ENTER"): on_newline,
         me.Shortcut(ctrl=True, alt=True, key="Enter"): on_shortcut,
-        me.Shortcut(meta=True, key="s"): on_shortcut,
-        me.Shortcut(key="Escape"): on_shortcut,
+        me.Shortcut(meta=True, key="S"): on_shortcut,
+        me.Shortcut(key="escape"): on_shortcut,
       },
     )
 

diff --git a/mesop/components/input/input.py b/mesop/components/input/input.py
@@ -42,7 +42,11 @@ class InputEnterEvent(MesopEvent):
 
 @dataclass(kw_only=True, frozen=True)
 class Shortcut:
-  """Represents a keyboard shortcut combination."""
+  """Represents a keyboard shortcut combination.
+
+  Key values are compared case-insensitively. For a list of possible key values, see
+  https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values.
+  """
 
   key: str
   shift: bool = False

diff --git a/mesop/components/input/input.ts b/mesop/components/input/input.ts
@@ -144,7 +144,8 @@ export class InputComponent {
     // Handle keyboard shortcut events (textareas only)
     for (const shortcutHandler of this._config.getOnShortcutHandlerList()) {
       if (
-        keyboardEvent.key === shortcutHandler.getShortcut()!.getKey() &&
+        keyboardEvent.key.toLowerCase() ===
+          shortcutHandler.getShortcut()!.getKey()!.toLowerCase() &&
         keyboardEvent.altKey === shortcutHandler.getShortcut()!.getAlt() &&
         keyboardEvent.ctrlKey === shortcutHandler.getShortcut()!.getCtrl() &&
         keyboardEvent.shiftKey === shortcutHandler.getShortcut()!.getShift() &&