Add blur event to textbox and number

[dawoodkhan82]

Description

Add blur event. Triggered when user clicks out of textbox.

Screen.Recording.2022-10-11.at.3.39.22.PM.mov

Please include:

• relevant motivation
• a summary of the change
• which issue is fixed.
• any additional dependencies that are required for this change.

Closes: #2449

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[github-actions]

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

[aliabid94]

lgtm

[pngwn]

Is this really a thing people want to do?

[abidlabs]

Is this really a thing people want to do?

It could be a useful way to get a .change()-like effect that doesn't fire with every character that is typed.

• Tested and works well with gr.Textbox(), however, it doesn't seem to work for gr.Number() for me.

import gradio as gr
import time


with gr.Blocks() as demo:
    a = gr.Number()
    c = gr.Number()
    
    a.blur(lambda x:x, a, c)
    
demo.launch()

[aliabid94]

could be a useful way to get a .change()-like effect that doesn't fire with every character that is typed

But the user has to click out of the box to trigger it, and they may not be aware of it. Personally no strong feeling whether or not to merge this.

[abidlabs]

The use case that I envision here is a form with multiple textboxes / numbers, and you want the output to update as a user updates the values of the form components. It's nice for the user to be able flow between the form components without having to click a submit button.

Imo it doesn't the surface area too much or in any significantly new directions, so would be in favor of merging once it's fully working.

[dawoodkhan82]

@abidlabs should work for number now.

[abidlabs]

Works great thanks @dawoodkhan82! LGTM

[pngwn]

This would be better as a change event, rather than a blur to cover the usecase that @abidlabs mentioned. The described behaviour is almost exactly what the native change event does. blur is really about focusing and unfocusing.

Note: Although our event is called change the actually event we listen for is input which occurs on every keystroke.

[dawoodkhan82]

Right, I was considering re-implementing the change event by using blur but I believe the plan is to fix the current change event to work for every keystroke, like this PR would (#2436)

[abidlabs]

Yeah I think we shouldn't change the change() event dramatically as this might break expectations around existing demos. However, changing the behavior of it to "wait" would resolve the problems people are having.

[pngwn]

Sorry, I meant that this blur functionality is better covered by the native change DOM event, not that we should alter our change event.

One benefit of the native change event is that it doesn't trigger when the value has not changed even if the user focuses in and out of an input.