Add `.key_up` event listener to `gr.Dropdown()` #7404

abidlabs · 2024-02-12T22:02:38Z

Note: I had initially called it .type() but that conflicts with the Dropdown.type attribute. Also, because typing does not automatically update the value of the Dropdown component, added a new KeyDownData class to transmit the relevant data.

gradio-pr-bot · 2024-02-12T22:03:34Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detecting...

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/8d5e6b4de07c0460290f4fd77eef6c76d2eedfc7/gradio-4.18.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@8d5e6b4de07c0460290f4fd77eef6c76d2eedfc7#subdirectory=client/python"

gradio-pr-bot · 2024-02-12T22:03:45Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/app`	`minor`
`@gradio/dropdown`	`minor`
`@gradio/utils`	`minor`
`gradio`	`minor`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Add .key_up event listener to gr.Dropdown()

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

…pdown-type

aliabid94 · 2024-02-12T23:22:29Z

.changeset/shaggy-hairs-peel.md

+"gradio": minor
+---
+
+fix:Add `.type` event listener to `gr.Dropdown()`


Suggested change

fix:Add `.type` event listener to `gr.Dropdown()`

fix:Add `.key_down` event listener to `gr.Dropdown()`

Looks like the changeset didnt get triggered here

Weird, maybe b/c this wasn't initially targeting main, now it is

aliabid94 · 2024-02-12T23:29:04Z

Keep in mind key_down is triggered on any key press, including arrow keys, shift, etc. which do not affect the actual typed value. Also, key_down is triggered before the value of an input field changes (unlike key up, which triggers after the input value changes)

abidlabs · 2024-02-12T23:54:55Z

Keep in mind key_down is triggered on any key press, including arrow keys, shift, etc. which do not affect the actual typed value.

Yes, I considered excluding those but figured that it would be better to just provide the .key data and let the developer handle it themselves

Also, key_down is triggered before the value of an input field changes (unlike key up, which triggers after the input value changes)

Yup but again I think this is fine because we provide both the .input_value which is the state of the component before the key press, and the key data and the developer can put them together.

aliabid94 · 2024-02-12T23:57:32Z

Also, key_down is triggered before the value of an input field changes (unlike key up, which triggers after the input value changes)

Yup but again I think this is fine because we provide both the .input_value which is the state of the component before the key press, and the key data and the developer can put them together.

Why not just use the key up method

abidlabs · 2024-02-12T23:58:33Z

Why not just use the key up method

Tbh no strong reason, I can change it

abidlabs · 2024-02-13T00:22:34Z

Ok I've changed it to use .key_up(). The modified version of your demo @aliabid94:

import gradio as gr

def test(value, key_up_data: gr.KeyUpData):
    input_val = key_up_data.input_value
    return gr.Dropdown(value=input_val, choices=[f"{input_val} {i}" for i in range(10)])

with gr.Blocks() as demo:
    d = gr.Dropdown(["abc", "def"], allow_custom_value=True)
    t = gr.JSON()
    d.key_up(test, d, d, show_progress="hidden")

if __name__ == "__main__":
    demo.launch()

still doesn't work, but for a different reason. The problem is the issue that @pngwn brought up before which is when a component is used as an output component, it it set to be static and then converted back to interactive, so it loses its state. In this case, it means that the Dropdown choices are hidden and the Dropdown is blurred. This leads to an unusuable UX.

There are a few different ways we could fix it, the simplest being that we don't do this interactive/static switch when show_progress="hidden". But I believe that @pngwn has a more comprehensive fix planned soon, so I'll leave that out of the scope of this PR.

abidlabs · 2024-02-13T16:30:17Z

Ok I've made a temporary workaround by not disabling output components when the event is of type key_up (we do the same thing for focus actually) so that we can get this in. We're discussing a more comprehensive solution internally.

@aliabid94 the demo I shared above should work now. Look ok to merge?

pngwn · 2024-02-13T19:34:07Z

js/dropdown/shared/Multiselect.svelte

+					on:keyup={(e) =>
+						dispatch("key_up", {
+							key: e.key,
+							input_value: input_text
+						})}


I would just use keypress here, the issue with keyup is that it won't fire if you hold the key down even though the text will be displayed which isn't very intuitive.

pngwn · 2024-02-13T19:35:32Z

gradio/events.py

+    key_up = EventListener(
+        "key_up",
+        doc="This listener is triggered when the user presses a key while the {{ component }} is focused.",
+    )


I think keypress is a little more intuitive, partly because we might want to change precisely when this even is fired (keypresses have multiple stages) but also because 'press' is a little more generic. key press phases are pretty close to an implementation detail.

aliabid94 · 2024-02-13T20:11:07Z

I remember users have asked for adding keyboard shortcuts to their apps before, this api could lead to something like:

with gr.Blocks() as demo:
  def keylistener(evt: KeyPressEvent):
    if evt.keyCode == ...

  demo.keypress(keylistener)

allowing keypress listeners to a whole app

pngwn · 2024-02-13T20:15:08Z

Sometimes they want the keypress to do some discreet UI thing that isn't really controllable via python atm though. We have had lots of image editor related keyless request which would be almost impossible to implement via a backend function and would lead to a really bad experience anyway.

aliabid94 · 2024-02-13T21:19:37Z

.changeset/tasty-spies-spend.md

@@ -3,4 +3,4 @@
 "gradio": patch
 ---

-fix:Retain dropdown value if choices have been changed
+fix:Retain dropdown value if choices have been changed


again, not the correct message

aliabid94

LGTM, agree that we should be using KeyPress everywhere instead of KeyUp

abidlabs · 2024-02-13T21:43:38Z

Thanks for the reviews @aliabid94 and @pngwn. I'll replace with .keypress then.

abidlabs · 2024-02-13T21:50:07Z

Actually @aliabid94 @pngwn the keypress event is deprecated and keydown is the recommended alternative: https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event.

In most of demos though (including the demo described by @apolinario) I think, keyup is preferable to keydown as it includes the latest value of the input. I tested the demo with keyup and it works quite well. Let me know if I'm missing anything!

abidlabs and others added 4 commits February 12, 2024 11:13

dropdown choice bug

2601336

add changeset

63009fe

add changeset

ca1eb9f

changes

ae8fbea

abidlabs added the v: minor A change that requires a minor release label Feb 12, 2024

abidlabs changed the base branch from main to dropdown-bugs February 12, 2024 22:03

add changeset

aa6ff4b

abidlabs added 6 commits February 12, 2024 14:11

format

b6b2ba8

Merge branch 'dropdown-type' of github.com:gradio-app/gradio into dro…

3e86d89

…pdown-type

key down:

6b81536

change

7f6b36d

change

de5f1f0

format

f5fceb4

abidlabs changed the title ~~Add .type event listener to gr.Dropdown()~~ Add .key_down event listener to gr.Dropdown() Feb 12, 2024

abidlabs requested review from aliabid94, aliabd, dawoodkhan82, pngwn, hannahblair and freddyaboulton February 12, 2024 22:31

abidlabs added 4 commits February 12, 2024 14:43

add KeyDownData

e6de39b

changes

3b19c74

add demo

233387e

notebook

389de38

abidlabs marked this pull request as ready for review February 12, 2024 22:48

aliabid94 reviewed Feb 12, 2024

View reviewed changes

Base automatically changed from dropdown-bugs to main February 12, 2024 23:52

Merge branch 'main' into dropdown-type

2127e06

key up

a4e2e2a

abidlabs changed the title ~~Add .key_down event listener to gr.Dropdown()~~ Add .key_up event listener to gr.Dropdown() Feb 13, 2024

abidlabs added 6 commits February 12, 2024 16:08

notebook

0d5e060

changes

4718999

Delete .changeset/shaggy-hairs-peel.md

6a9ee1f

Delete .changeset/tasty-spies-spend.md

59e3f51

revert changeset deletion

d8753ed

change

f2c8ace

abidlabs added 3 commits February 12, 2024 17:50

fix unit test

ad8a5ed

type disable

56e3521

fix

3e0f194

pngwn reviewed Feb 13, 2024

View reviewed changes

aliabid94 reviewed Feb 13, 2024

View reviewed changes

aliabid94 approved these changes Feb 13, 2024

View reviewed changes

abidlabs and others added 2 commits February 13, 2024 13:50

cset

5179813

add changeset

8d5e6b4

abidlabs merged commit 065c5b1 into main Feb 14, 2024
8 checks passed

abidlabs deleted the dropdown-type branch February 14, 2024 01:14

pngwn mentioned this pull request Feb 14, 2024

chore: update versions #7387

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `.key_up` event listener to `gr.Dropdown()` #7404

Add `.key_up` event listener to `gr.Dropdown()` #7404

abidlabs commented Feb 12, 2024 •

edited

gradio-pr-bot commented Feb 12, 2024 •

edited

gradio-pr-bot commented Feb 12, 2024 •

edited

Something isn't right?

aliabid94 Feb 12, 2024

hannahblair Feb 12, 2024

abidlabs Feb 13, 2024

aliabid94 commented Feb 12, 2024

abidlabs commented Feb 12, 2024

aliabid94 commented Feb 12, 2024

abidlabs commented Feb 12, 2024

abidlabs commented Feb 13, 2024

abidlabs commented Feb 13, 2024

pngwn Feb 13, 2024

pngwn Feb 13, 2024

aliabid94 commented Feb 13, 2024

pngwn commented Feb 13, 2024

aliabid94 Feb 13, 2024

aliabid94 left a comment

abidlabs commented Feb 13, 2024

abidlabs commented Feb 13, 2024 •

edited

	fix:Add `.type` event listener to `gr.Dropdown()`
	fix:Add `.key_down` event listener to `gr.Dropdown()`

Add .key_up event listener to gr.Dropdown() #7404

Add .key_up event listener to gr.Dropdown() #7404

Conversation

abidlabs commented Feb 12, 2024 • edited

gradio-pr-bot commented Feb 12, 2024 • edited

🪼 branch checks and previews

gradio-pr-bot commented Feb 12, 2024 • edited

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

aliabid94 Feb 12, 2024

Choose a reason for hiding this comment

hannahblair Feb 12, 2024

Choose a reason for hiding this comment

abidlabs Feb 13, 2024

Choose a reason for hiding this comment

aliabid94 commented Feb 12, 2024

abidlabs commented Feb 12, 2024

aliabid94 commented Feb 12, 2024

abidlabs commented Feb 12, 2024

abidlabs commented Feb 13, 2024

abidlabs commented Feb 13, 2024

pngwn Feb 13, 2024

Choose a reason for hiding this comment

pngwn Feb 13, 2024

Choose a reason for hiding this comment

aliabid94 commented Feb 13, 2024

pngwn commented Feb 13, 2024

aliabid94 Feb 13, 2024

Choose a reason for hiding this comment

aliabid94 left a comment

Choose a reason for hiding this comment

abidlabs commented Feb 13, 2024

abidlabs commented Feb 13, 2024 • edited

Add `.key_up` event listener to `gr.Dropdown()` #7404

Add `.key_up` event listener to `gr.Dropdown()` #7404

abidlabs commented Feb 12, 2024 •

edited

gradio-pr-bot commented Feb 12, 2024 •

edited

gradio-pr-bot commented Feb 12, 2024 •

edited

abidlabs commented Feb 13, 2024 •

edited