feat: [APPSMTH-22] Execute action on widget focus and blur #18128

gitstart-appsmith · 2022-11-07T10:59:12Z

Description

This PR enables onFocus and onBlur events on the following Widgets

CurrencyInput
Input
PhoneNumber
Select
MultiSelect
SingleTreeSelect
MultiTreeSelect
DatePicker

NB: This would require updating the Appsmith Documentation

Fixes #6452

Type of change

New feature (non-breaking change which adds functionality)
This change requires a documentation update

How Has This Been Tested?

Cypress Tests

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
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

welcome · 2022-11-07T10:59:14Z

Welcome to the Appsmith community! Thank you for your first pull request and making this project better. 🤗 Please make sure that you raise a review request so your code change does not go unnoticed.

vercel · 2022-11-07T10:59:16Z

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

Name	Status	Preview	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	Dec 9, 2022 at 5:59AM (UTC)

github-actions · 2022-11-14T16:43:50Z

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

sbalaji1192

Lets use same helptext for onFocus and onClur across widgets.
onFocus - Triggers an action when the widget receives focus
onBlur - Triggers an action when the widget loses focus
@dilippitchika

app/client/src/widgets/CurrencyInputWidget/widget/index.tsx

app/client/src/widgets/BaseInputWidget/widget/index.tsx

app/client/src/widgets/DatePickerWidget2/widget/index.tsx

app/client/src/widgets/InputWidgetV2/component/index.tsx

app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx

app/client/src/widgets/SelectWidget/component/index.tsx

sbalaji1192 · 2022-11-16T11:26:46Z

app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx

@@ -294,6 +294,24 @@ class SingleSelectTreeWidget extends BaseWidget<
            isBindProperty: true,
            isTriggerProperty: true,
          },
+          {
+            helpText: "Triggers an action when a select field gets focus",
+            propertyName: "onFocus",


should call this property onOpen instead of onFocus ?
@dilippitchika @somangshu

@sbalaji1192 most of the frameworks out there are using focus / focused / onFocus. Seems like its a dev friendly word. But keeping appsmith in mind and all the target audience we have onOpen might be a good option, open to explore

cc @dilippitchika @Nikhil-Nandagopal what do you think?

onFocus and onOpen are 2 different things, let's not mix them. Let's keep the scope constrained to focus only for now and we will create a new issue for onOpen.

@dilippitchika Though we are calling it onFocus, it gets triggered when the dropdown is opened. onBlur also gets called when dropdown is closed.

Oh, you are right then it's a problem. OnFocus and OnBlur should only be triggered when the widgets are in/not in focus. Not when the dropdown is open or closed. The scenario where onBlur and dropdown close should happen together is when the focus itself is lost like user clicking outside the widget.

Understood, looks like this is a limitation from the library itself and this needs to be updated. Let me test the preview and get back with further queries.

@dilippitchika Will hold off review till you're back with queries if any

@gitstart-appsmith Ok i checked, the problem i see with select widgets (select, multi-select etc) is the event triggers only when the popover is open or closed not when the widget is focused or blurred. Here's a loom - https://www.loom.com/share/a5447aae932441348fa0dd3456ea89c9

My expectation is the event onFocus should be triggered when we are focusing on the widget. If we are unable to do that we should rename this to onOpen and onClose. But i need to understand how to do onFocus and onBlur on these widgets.

@dilippitchika, Here's a loom video explaining why our approach was used https://www.loom.com/share/6ce616c8900b4e9b8ad15ab9be8ea597

Thanks for the explanation, @gitstart-appsmith. For now let's change the name of the onFocus and onBlur to onDropdownOpen and onDropdownClose for the following widgets. This should be fine for now

Select

Multi-select

Multi-tree-select

Tree-select

app/client/src/widgets/useDropdown.tsx

…thub.com/appsmithorg/appsmith into APPSMTH-22

sbalaji1192 · 2022-12-05T06:26:30Z

/ok-to-test sha=1085701

github-actions · 2022-12-05T07:57:55Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3617908982.
Workflow: Appsmith External Integration Test Workflow.
Commit: 1085701.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-63465d4789020c7ac296d08d?pr=18128&runId=3617908982_1

sbalaji1192 · 2022-12-06T11:40:00Z

/ok-to-test sha=1085701

github-actions · 2022-12-06T11:40:25Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3629175587.
Workflow: Appsmith External Integration Test Workflow.
Commit: 1085701.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18128&runId=3629175587_1

sbalaji1192 · 2022-12-07T06:13:56Z

/ok-to-test sha=1085701

github-actions · 2022-12-07T06:14:21Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3636363637.
Workflow: Appsmith External Integration Test Workflow.
Commit: 1085701.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18128&runId=3636363637_1

sbalaji1192 · 2022-12-08T06:27:28Z

/ok-to-test sha=4667793

github-actions · 2022-12-08T06:27:53Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3645875948.
Workflow: Appsmith External Integration Test Workflow.
Commit: 4667793.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18128&runId=3645875948_1

sbalaji1192 · 2022-12-09T04:01:17Z

/ok-to-test sha=4667793

github-actions · 2022-12-09T04:01:46Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3654343179.
Workflow: Appsmith External Integration Test Workflow.
Commit: 4667793.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18128&runId=3654343179_1

sbalaji1192 · 2022-12-09T05:47:20Z

/ok-to-test sha=519ddbe

github-actions · 2022-12-09T05:47:42Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3654846927.
Workflow: Appsmith External Integration Test Workflow.
Commit: 519ddbe.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18128&runId=3654846927_1

sbalaji1192 · 2022-12-09T05:49:26Z

/ok-to-test sha=90782bc

github-actions · 2022-12-09T05:49:52Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3654855829.
Workflow: Appsmith External Integration Test Workflow.
Commit: 90782bc.
PR: 18128.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18128&runId=3654855829_1

feat: execute action on widget focus and blur

a388297

gitstart-appsmith self-assigned this Nov 7, 2022

vercel bot deployed to Preview – appsmith November 7, 2022 11:00 View deployment

gitstart-appsmith changed the title ~~[APPSMITH-22] : [Feature] Execute action on widget focus and blur~~ feat: [APPSMITH-22] : [Feature] Execute action on widget focus and blur Nov 7, 2022

github-actions bot added the Enhancement New feature or request label Nov 7, 2022

gitstart-appsmith changed the title ~~feat: [APPSMITH-22] : [Feature] Execute action on widget focus and blur~~ feat: Execute action on widget focus and blur Nov 7, 2022

gitstart-appsmith changed the title ~~feat: Execute action on widget focus and blur~~ feat: [APPSMTH-22] Execute action on widget focus and blur Nov 7, 2022

gitstart-appsmith marked this pull request as ready for review November 7, 2022 15:33

github-actions bot added the Stale label Nov 14, 2022

somangshu requested a review from sbalaji1192 November 16, 2022 05:15

sbalaji1192 reviewed Nov 16, 2022

View reviewed changes

gitstart-appsmith added 2 commits November 18, 2022 16:27

Merge commit '9079d366006599e87b53e300fb336c5f89b1d104' of https://gi…

027f6ae

…thub.com/appsmithorg/appsmith into APPSMTH-22

[Feature] Execute action on widget focus and blur

a1eb495

github-actions bot added the High This issue blocks a user from building or impacts a lot of users label Nov 18, 2022

Merge branch 'release' into APPSMTH-22

1085701

vercel bot deployed to Preview – appsmith December 5, 2022 06:27 View deployment

Merge branch 'release' into APPSMTH-22

c7d72d4

vercel bot deployed to Preview – appsmith December 7, 2022 06:19 View deployment

Merge branch 'release' into APPSMTH-22

b46093a

vercel bot deployed to Preview – appsmith December 7, 2022 16:38 View deployment

ci fixes

4667793

sbalaji1192 dismissed stale reviews from dilippitchika and themself via 4667793 December 8, 2022 06:26

vercel bot deployed to Preview – appsmith December 8, 2022 06:29 View deployment

i

519ddbe

Merge branch 'release' into APPSMTH-22

90782bc

vercel bot deployed to Preview December 9, 2022 05:59 View deployment

sbalaji1192 approved these changes Dec 12, 2022

View reviewed changes

sbalaji1192 merged commit 618626f into release Dec 12, 2022

sbalaji1192 deleted the APPSMTH-22 branch December 12, 2022 07:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [APPSMTH-22] Execute action on widget focus and blur #18128

feat: [APPSMTH-22] Execute action on widget focus and blur #18128

gitstart-appsmith commented Nov 7, 2022 •

edited

welcome bot commented Nov 7, 2022

vercel bot commented Nov 7, 2022 •

edited

github-actions bot commented Nov 14, 2022

sbalaji1192 left a comment

sbalaji1192 Nov 16, 2022

somangshu Nov 16, 2022

dilippitchika Nov 18, 2022

sbalaji1192 Nov 18, 2022

dilippitchika Nov 18, 2022

dilippitchika Nov 21, 2022

sbalaji1192 Nov 21, 2022

dilippitchika Nov 22, 2022

gitstart-appsmith Nov 22, 2022

dilippitchika Nov 22, 2022

sbalaji1192 commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

sbalaji1192 commented Dec 6, 2022

github-actions bot commented Dec 6, 2022

sbalaji1192 commented Dec 7, 2022

github-actions bot commented Dec 7, 2022

sbalaji1192 commented Dec 8, 2022

github-actions bot commented Dec 8, 2022

sbalaji1192 commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

sbalaji1192 commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

sbalaji1192 commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

feat: [APPSMTH-22] Execute action on widget focus and blur #18128

feat: [APPSMTH-22] Execute action on widget focus and blur #18128

Conversation

gitstart-appsmith commented Nov 7, 2022 • edited

Description

Type of change

How Has This Been Tested?

Checklist:

welcome bot commented Nov 7, 2022

vercel bot commented Nov 7, 2022 • edited

github-actions bot commented Nov 14, 2022

sbalaji1192 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sbalaji1192 commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

sbalaji1192 commented Dec 6, 2022

github-actions bot commented Dec 6, 2022

sbalaji1192 commented Dec 7, 2022

github-actions bot commented Dec 7, 2022

sbalaji1192 commented Dec 8, 2022

github-actions bot commented Dec 8, 2022

sbalaji1192 commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

sbalaji1192 commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

sbalaji1192 commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

gitstart-appsmith commented Nov 7, 2022 •

edited

vercel bot commented Nov 7, 2022 •

edited