fix: dropdown not opening if user clicks on dropdown backdrop

[tewarig]

Description

bug - https://github.com/user-attachments/assets/a135e5a2-e283-466e-b58d-76785ed0e10b

RCA - Let’s say we currently have a structure like this:

<Box>
  <Input />
  <TriggerElement />
</Box>

We added onClick listeners to both Input and TriggerElement. However, if the user clicks on the backdrop of TriggerElement (in cases where TriggerElement doesn’t occupy the full space), nothing gets triggered. This was causing the issue.

Changes

We added an additional prop, onBackdropClick, which is applied to the wrapper. This ensures that when a user clicks on the backdrop, we can decide what action needs to be taken.

Now -

https://github.com/user-attachments/assets/10dbbdaa-611f-491c-a3a9-c38cc7f808ea

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[bot]]

🦋 Changeset detected

Latest commit: e13f6ddd779bbfe8333c58b2a8ca8f720bfb6989

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | --------------- | ----- | | @razorpay/blade | Patch |

Not sure what this means? Click here to learn what changesets are.

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

[github-actions[bot]]

✅ PR title follows Conventional Commits specification.

[codesandbox-ci[bot]]

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 e13f6ddd779bbfe8333c58b2a8ca8f720bfb6989:

Sandbox	Source
razorpay/blade: basic	Configuration

[rzpcibot]

Bundle Size Report

Updated Components

| Status | Component | Base Size (kb) | Current Size (kb) | Diff | | --- | --- | --- | --- | --- | | ⬆ | DatePicker | 85.617 | 85.712 | +0.095 KB | | ⬆ | Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell | 65.921 | 66.042 | +0.121 KB | | ⬆ | SelectInput, AutoComplete | 35.883 | 36.005 | +0.122 KB | | ⬆ | OTPInput | 29.938 | 30.064 | +0.126 KB | | ⬆ | PasswordInput | 31.584 | 31.698 | +0.114 KB | | ⬆ | PhoneNumberInput | 59.838 | 59.960 | +0.122 KB | | ⬆ | SearchInput | 34.222 | 34.330 | +0.108 KB | | ⬆ | TextArea | 32.113 | 32.225 | +0.112 KB | | ⬆ | TextInput | 33.693 | 33.807 | +0.114 KB |

Generated by :no_entry_sign: dangerJS against e13f6ddd779bbfe8333c58b2a8ca8f720bfb6989

[saurabhdaware]

I think it stopped working 🙈

I checked it here - https://61c19ee8d3d282003ac1d81c-dvqwjooyeb.chromatic.com/?path=/story/components-dropdown-with-select-props-playground--default

https://github.com/user-attachments/assets/43d75bcb-a2f7-454f-9798-cf551ba2af01

[tewarig]

for testing - https://codesandbox.io/p/sandbox/razorpay-blade-basic-forked-3przv7?file=%2Fpackage.json%3A13%2C25-13%2C91