Enhancement: Add focus event to textbox and number component #5005

JodyZ0203 · 2023-07-24T04:01:09Z

Description

Registered event called Focusable under event.py and combined Blurrable with Focusable
Updated the corresponding components (textbox & numbers) to reflect the changes in the frontend through .focus() event.
Added focus event to ColorPicker and DropDown Components

Closes: #(issue)
This PR fixes #4817

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh
You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

Test with

import gradio as gr


def greet(str):
    return str

with gr.Blocks() as demo:
    with gr.Row():
            text1 = gr.TextArea()
            text2 = gr.TextArea()
            drop1 = gr.Dropdown(choices=['1','2','3','4','5'], label="Dropdown with Blur")
            drop2 = gr.Dropdown(
                choices=[
                    "simple",
                    "stacked",
                    "grouped",
                    "simple-horizontal",
                    "stacked-horizontal",
                    "grouped-horizontal",
                ],
                type="value",
                label="Dropdown with Focus",
            )
            colorPicker = gr.ColorPicker(label="ColorPicker with Blur")
            colorPicker2 = gr.ColorPicker(label="ColorPicker with Focus")
    drop1.blur(greet, text1, text2)
    drop2.focus(greet, text1, text2)
    colorPicker.blur(greet, text1, text2)
    colorPicker2.focus(greet, text1, text2)


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

Demo

Gradio.Component.Focus.mov

Focusable.on.Dropdown.and.ColorPicker.mov

vercel · 2023-07-24T04:01:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	Aug 1, 2023 6:08pm

gradio-pr-bot · 2023-07-24T06:11:26Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/app`	`minor`
`@gradio/form`	`minor`
`gradio`	`minor`

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

With the following changelog entry.

Enhancement: Add focus event to textbox and number component

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.

gradio-pr-bot · 2023-07-24T06:13:52Z

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-5005-all-demos

You can install the changes in this PR by running:

pip install https://gradio-builds.s3.amazonaws.com/3af551af4b7979636a8fdd449c818450bfc39ce2/gradio-3.39.0-py3-none-any.whl

aliabid94 · 2023-07-24T19:37:00Z

Makes sense (surprised we didn't have this already given we have Blurable). Thanks for the PR @JodyZ0203!

What if we merge Focasable and Blurable into a single class Focusable that has both .focus and .blur? (Analogous to how any Playable has .play, .pause, and .stop) We'd have to add .focus to dropdown and colorpicker too.

JodyZ0203 · 2023-07-25T00:18:14Z

Makes sense (surprised we didn't have this already given we have Blurable). Thanks for the PR @JodyZ0203!

What if we merge Focasable and Blurable into a single class Focusable that has both .focus and .blur? (Analogous to how any Playable has .play, .pause, and .stop) We'd have to add .focus to dropdown and colorpicker too.

That's a good idea. Since they are similar enough, I can merge them together.

abidlabs · 2023-07-28T20:54:05Z

Hi @JodyZ0203 thanks for the contribution! Would you be interested in implementing the suggested changes?

JodyZ0203 · 2023-07-28T21:57:26Z

Merge branch 'main' into feat/detect_textbox_focus

Hi @abidlabs , I'm currently working on the suggested changes. Aiming to get PR out this weekend. Thanks!

…203/gradio into feat/detect_textbox_focus

JodyZ0203 · 2023-07-30T11:31:51Z

@abidlabs @aliabid94 Changes are ready!

abidlabs · 2023-07-31T13:57:43Z

Thanks @JodyZ0203! Would you just be able to resolve the merge conflict, and then happy to take another look

JodyZ0203 · 2023-08-01T02:34:18Z

Hi @abidlabs! Merge conflict resolved. It's ready for another look. Thanks!

aliabid94 · 2023-08-01T17:51:06Z

js/form/src/ColorPicker.svelte

@@ -22,6 +23,15 @@
 			dispatch("input");
 		}
 	}
+


no need for event listener methods if they just dispatch - on:blur and on:focus is sufficient.

That make sense.

aliabid94 · 2023-08-01T17:55:27Z

js/form/src/Dropdown.svelte

+	function handle_focus(e: FocusEvent){
+		dispatch("focus");
+		showOptions = !showOptions;
+		if (showOptions) {


there's an existing handleFocus method, that is pretty identical except you changed
filtered = choices;
to
inputValue = "";

any reason for this?

Yeah we should keep filtered = choices; I believe, otherwise, it'll revert some of the fixes in #5039

aliabid94 · 2023-08-01T18:08:13Z

made the fixes, should be ready to merge. Thanks for this @JodyZ0203 !

abidlabs · 2023-08-01T20:02:46Z

Thanks again @JodyZ0203! Merging

gradio-pr-bot · 2023-08-01T20:03:13Z

🎉 Chromatic build completed!

There are 4 visual changes to review.
There are 0 failed tests to fix.

JodyZ0203 · 2023-08-01T23:47:19Z

Thank you! @abidlabs @aliabid94

Add focus event to textbox and number component

c6cbf7b

vercel bot deployed to Preview July 24, 2023 04:02 View deployment

add changeset

4558bfd

vercel bot deployed to Preview July 24, 2023 06:12 View deployment

JodyZ0203 and others added 2 commits July 28, 2023 02:27

Merge branch 'main' into feat/detect_textbox_focus

f63ddfe

Merge branch 'main' into feat/detect_textbox_focus

a229825

vercel bot deployed to Preview July 28, 2023 20:54 View deployment

Merge branch 'main' into feat/detect_textbox_focus

2c0ae57

vercel bot deployed to Preview July 29, 2023 18:00 View deployment

JodyZ0203 and others added 2 commits July 29, 2023 14:00

Merge branch 'main' into feat/detect_textbox_focus

a36c230

Merge branch 'main' into feat/detect_textbox_focus

5bdc0c0

vercel bot deployed to Preview July 30, 2023 06:13 View deployment

JodyZ0203 added 4 commits July 30, 2023 06:21

Combine Blurrable and Focusable into Focusable event

734bc29

Add focus and blur to Dropdown and Colorpicker components

7f648bf

add focus to home page template

4d3f95e

Merge branch 'feat/detect_textbox_focus' of https://github.com/JodyZ0…

a830125

…203/gradio into feat/detect_textbox_focus

vercel bot deployed to Preview July 30, 2023 10:44 View deployment

Add Focus to doc

974cf2e

vercel bot deployed to Preview July 30, 2023 11:22 View deployment

Fix linting error

2b2e0a1

vercel bot deployed to Preview July 30, 2023 15:02 View deployment

Merge branch 'main' into feat/detect_textbox_focus

337a59e

vercel bot deployed to Preview August 1, 2023 02:34 View deployment

Merge remote-tracking branch 'origin' into feat/detect_textbox_focus

33132b0

vercel bot deployed to Preview August 1, 2023 17:46 View deployment

aliabid94 reviewed Aug 1, 2023

View reviewed changes

fixes

537ac94

vercel bot deployed to Preview August 1, 2023 18:08 View deployment

abidlabs merged commit f5539c7 into gradio-app:main Aug 1, 2023
12 checks passed

pngwn mentioned this pull request Aug 1, 2023

chore: update versions #5038

Merged

dawoodkhan82 mentioned this pull request Aug 9, 2023

'Dropdown' object has no attribute 'focus' #5144

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhancement: Add focus event to textbox and number component #5005

Enhancement: Add focus event to textbox and number component #5005

JodyZ0203 commented Jul 24, 2023 •

edited

vercel bot commented Jul 24, 2023 •

edited

gradio-pr-bot commented Jul 24, 2023 •

edited

Something isn't right?

gradio-pr-bot commented Jul 24, 2023 •

edited

aliabid94 commented Jul 24, 2023

JodyZ0203 commented Jul 25, 2023 •

edited

abidlabs commented Jul 28, 2023

JodyZ0203 commented Jul 28, 2023

JodyZ0203 commented Jul 30, 2023

abidlabs commented Jul 31, 2023

JodyZ0203 commented Aug 1, 2023

aliabid94 Aug 1, 2023

JodyZ0203 Aug 1, 2023

aliabid94 Aug 1, 2023

abidlabs Aug 1, 2023 •

edited

aliabid94 commented Aug 1, 2023

abidlabs commented Aug 1, 2023

gradio-pr-bot commented Aug 1, 2023 •

edited

JodyZ0203 commented Aug 1, 2023

Enhancement: Add focus event to textbox and number component #5005

Enhancement: Add focus event to textbox and number component #5005

Conversation

JodyZ0203 commented Jul 24, 2023 • edited

Description

🎯 PRs Should Target Issues

Tests

Demo

vercel bot commented Jul 24, 2023 • edited

gradio-pr-bot commented Jul 24, 2023 • edited

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

gradio-pr-bot commented Jul 24, 2023 • edited

aliabid94 commented Jul 24, 2023

JodyZ0203 commented Jul 25, 2023 • edited

abidlabs commented Jul 28, 2023

JodyZ0203 commented Jul 28, 2023

JodyZ0203 commented Jul 30, 2023

abidlabs commented Jul 31, 2023

JodyZ0203 commented Aug 1, 2023

aliabid94 Aug 1, 2023

Choose a reason for hiding this comment

JodyZ0203 Aug 1, 2023

Choose a reason for hiding this comment

aliabid94 Aug 1, 2023

Choose a reason for hiding this comment

abidlabs Aug 1, 2023 • edited

Choose a reason for hiding this comment

aliabid94 commented Aug 1, 2023

abidlabs commented Aug 1, 2023

gradio-pr-bot commented Aug 1, 2023 • edited

JodyZ0203 commented Aug 1, 2023

JodyZ0203 commented Jul 24, 2023 •

edited

vercel bot commented Jul 24, 2023 •

edited

gradio-pr-bot commented Jul 24, 2023 •

edited

gradio-pr-bot commented Jul 24, 2023 •

edited

JodyZ0203 commented Jul 25, 2023 •

edited

abidlabs Aug 1, 2023 •

edited

gradio-pr-bot commented Aug 1, 2023 •

edited