fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151] #2408

tewarig · 2024-11-06T17:52:47Z

Description

This pr add adds fixes -

Dropdown component does not fire change or input event when the value is changed or committed.
Date picker component does not fire change or input event when the value is changed or committed.
FileUpload component does not fire change or input event when the file is dropped.

for testing -
https://codesandbox.io/p/sandbox/razorpay-blade-basic-forked-ky8wfs?workspaceId=b3d29104-ffe4-442f-8d81-f2753e652d83

Changes

Adds a fireNativeEvent function
trigger fireNativeEvent function in DatePicker, useDropDown, fileUpload, BaseDropDownInputTrigger

Additional Information

Component Checklist

Update Component Status Page
Perform Manual Testing in Other Browsers
Add KitchenSink Story
Add Interaction Tests (if applicable)
Add changeset

changeset-bot · 2024-11-06T17:52:50Z

⚠️ No Changeset found

Latest commit: 82104ef

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-11-06T17:53:00Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2024-11-06T17:56:50Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 82104ef:

Sandbox	Source
razorpay/blade: basic	Configuration

rzpcibot · 2024-11-06T18:06:01Z

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬆	ActionList, ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection	16.240	16.328	+0.088 KB
⬆	DatePicker	85.617	85.677	+0.060 KB
⬆	Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader	28.214	28.284	+0.070 KB
⬆	FileUpload	17.317	17.397	+0.080 KB
⬆	Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell	65.921	66.030	+0.109 KB
⬆	SelectInput, AutoComplete	35.883	35.984	+0.101 KB
⬆	PhoneNumberInput	59.838	59.925	+0.087 KB
⬆	SearchInput	34.222	34.285	+0.063 KB

Generated by 🚫 dangerJS against 82104ef

packages/blade/src/utils/fireNativeEvent/fireNativeEvent.web.ts

packages/blade/src/utils/fireNativeEvent/index.ts

anuraghazra · 2024-11-08T08:17:00Z

packages/blade/src/components/FileUpload/FileUpload.web.tsx

@@ -158,6 +159,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
    if (!hasValidationErrors) {
      handleFilesChange(droppedFiles);
      onDrop?.({ name, fileList: allFiles });
+      fireNativeEvent(inputRef, ['change', 'input']);


Check the normal DOM inputs if we actually fire both of these or not. I think they do but still confirm once.

checked for <input type="file" /> they do fire both change and input .

anuraghazra · 2024-11-08T08:18:58Z

packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx

@@ -176,6 +167,7 @@ const _BaseDropdownInputTrigger = (
    defaultValue: props.defaultValue,
    syncInputValueWithSelection: props.syncInputValueWithSelection,
    isSelectInput: props.isSelectInput,
+    triggererRef,


@saurabhdaware can you check this once, not sure ye kaha se agaya

i have added this in -
packages/blade/src/components/Input/DropdownInputTriggers/types.ts

anuraghazra

Mostly LGTM, Just add tests

packages/blade/src/utils/fireNativeEvent/fireNativeEvent.native.ts

…rigger-native-events

anuraghazra · 2024-11-15T06:17:25Z

Can you check for the failing tests

…rigger-native-events

tewarig · 2024-11-15T12:20:38Z

@anuraghazra changes done

tewarig added 2 commits November 6, 2024 23:21

chore: trigger native events

03cb1bb

chore: trigger native events

48182f7

tewarig changed the title ~~Fix: trigger native events~~ fix: trigger native events Nov 6, 2024

tewarig added 10 commits November 7, 2024 09:12

fix: fireNativeEvents in case of dropdown

0c355c1

chore: remove extra code

90d7063

chore: change value of fireNative events to unknown

7f537a3

chore: remove fireNativeEvent from autocompelte

d75fa17

chore: remove add fireNative event on remove , dissmiss

5d16744

chore: remove logs

45b43f9

chore: code clean up

b683440

chore: minor change

f66ef5f

chore: minor changes

6440afd

chore: fix type

497aff1

tewarig marked this pull request as ready for review November 7, 2024 20:22

tewarig requested review from chaitanyadeorukhkar, kamleshchandnani, anuraghazra, snitin315 and saurabhdaware as code owners November 7, 2024 20:22

tewarig changed the title ~~fix: trigger native events~~ fix: Trigger native select events in dropdown/ file upload / Date picker Nov 8, 2024

tewarig changed the title ~~fix: Trigger native select events in dropdown/ file upload / Date picker~~ fix: Trigger native select events in dropdown/ file upload / Date picker [FC-3151] Nov 8, 2024

anuraghazra reviewed Nov 8, 2024

View reviewed changes

packages/blade/src/utils/fireNativeEvent/fireNativeEvent.web.ts Outdated Show resolved Hide resolved

anuraghazra reviewed Nov 8, 2024

View reviewed changes

packages/blade/src/utils/fireNativeEvent/index.ts Outdated Show resolved Hide resolved

anuraghazra reviewed Nov 8, 2024

View reviewed changes

anuraghazra requested changes Nov 8, 2024

View reviewed changes

tewarig added 2 commits November 8, 2024 15:45

chore: fire native event is not supported on react-native

bf6083f

chore: change fire native event

4a5abdc

anuraghazra reviewed Nov 8, 2024

View reviewed changes

packages/blade/src/utils/fireNativeEvent/fireNativeEvent.native.ts Outdated Show resolved Hide resolved

chore: review change useFireNativeEvent

2a8975f

tewarig changed the title ~~fix: Trigger native select events in dropdown/ file upload / Date picker [FC-3151]~~ fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151] Nov 11, 2024

feat: added fireNativeEvent test

c4887f6

tewarig force-pushed the fix/trigger-native-events branch from 11e0005 to c4887f6 Compare November 11, 2024 11:39

tewarig added 10 commits November 11, 2024 17:27

chore: test for fireNativeEvent react native

9295b8d

Merge branch 'master' of https://github.com/razorpay/blade into fix/t…

92235e5

…rigger-native-events

chore: update fireNativeEvent error

7a6cfa9

chore: add tests in AutoComplete

f023d4c

feat: add test for fire naitve event in DatePicker

42b8c3d

feat: added test case for FileUpload

5e517b3

chore: sync with main

d139e26

fix: failing build

500e30f

chore: update snap

2e3b148

chore: add fixes to fireNativeEvent

277c1b9

tewarig added the Waiting for Changes Waiting for changes from PR author label Nov 15, 2024

tewarig added 2 commits November 15, 2024 15:56

Merge branch 'master' of https://github.com/razorpay/blade into fix/t…

a7657a4

…rigger-native-events

chore: change throwBladeError to logger

d6947b0

tewarig added changes done and removed Waiting for Changes Waiting for changes from PR author labels Nov 15, 2024

tewarig added 2 commits November 15, 2024 17:06

chore: fix errors

f0d49f5

chore: increase timeout

82104ef

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151] #2408

fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151] #2408

tewarig commented Nov 6, 2024 •

edited

Loading

changeset-bot bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

codesandbox-ci bot commented Nov 6, 2024 •

edited

Loading

rzpcibot commented Nov 6, 2024 •

edited

Loading

anuraghazra Nov 8, 2024

tewarig Nov 8, 2024

anuraghazra Nov 8, 2024

tewarig Nov 12, 2024 •

edited

Loading

anuraghazra left a comment •

edited

Loading

anuraghazra commented Nov 15, 2024

tewarig commented Nov 15, 2024

fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151] #2408

Are you sure you want to change the base?

fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151] #2408

Conversation

tewarig commented Nov 6, 2024 • edited Loading

Description

Changes

Additional Information

Component Checklist

changeset-bot bot commented Nov 6, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Nov 6, 2024 • edited Loading

codesandbox-ci bot commented Nov 6, 2024 • edited Loading

rzpcibot commented Nov 6, 2024 • edited Loading

Bundle Size Report

anuraghazra Nov 8, 2024

Choose a reason for hiding this comment

tewarig Nov 8, 2024

Choose a reason for hiding this comment

anuraghazra Nov 8, 2024

Choose a reason for hiding this comment

tewarig Nov 12, 2024 • edited Loading

Choose a reason for hiding this comment

anuraghazra left a comment • edited Loading

Choose a reason for hiding this comment

anuraghazra commented Nov 15, 2024

tewarig commented Nov 15, 2024

tewarig commented Nov 6, 2024 •

edited

Loading

changeset-bot bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading

codesandbox-ci bot commented Nov 6, 2024 •

edited

Loading

rzpcibot commented Nov 6, 2024 •

edited

Loading

tewarig Nov 12, 2024 •

edited

Loading

anuraghazra left a comment •

edited

Loading