PromucFlow_constructor/app/client/src/widgets/JSONFormWidget
Rahul Barwal 8cbf8a5504
fix: Implement dynamic dropdown width in SelectField in JSONForm (#37289)
## Description
<ins>Problem</ins>

The SelectField inside JSONForm widget's dropdown width was not
dynamically adjusted, resulting in inconsistent responsiveness.

<ins>Root cause</ins>

The SelectField component's dropdown width was not being updated
dynamically, causing the component to become too wide or too narrow,
affecting its usability.

<ins>Solution</ins>

This PR enhances the SelectField component to adjust its dropdown width
dynamically for improved responsiveness. This PR handles...

- Dynamically adjusting the dropdown width based on the available screen
space, ensuring a responsive user experience.
- Properly setting up and tearing down the ResizeObserver to ensure
accurate width detection.

Fixes #37279
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.JSONForm"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11790765022>
> Commit: 1438c99fb6760f87879363ed1ad82bc0f3ddea54
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11790765022&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JSONForm`
> Spec:
> <hr>Tue, 12 Nov 2024 04:59:15 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced the `SelectField` component for dynamic dropdown width
adjustment based on its wrapper size.
	- Improved filter update handling within the `SelectField`.

- **Bug Fixes**
- Expanded tests for validation logic to ensure accurate behavior based
on the `isRequired` property.

- **Tests**
- Added comprehensive tests for the `SelectField`, including mock
implementations for `ResizeObserver` to validate resizing behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-11-12 10:56:26 +05:30
..
component fix: JSON form validation trigger on child component update (#37128) 2024-11-06 15:48:45 +05:30
constants feat: JSON form widget one click binding integration (#25873) 2023-10-03 13:40:51 +05:30
fields fix: Implement dynamic dropdown width in SelectField in JSONForm (#37289) 2024-11-12 10:56:26 +05:30
widget fix: edge case to ignore parsing very large numbers (#37104) 2024-10-28 15:36:00 +05:30
constants.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
FormContext.tsx chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
helper.test.ts chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> 2023-03-16 17:11:47 +05:30
helper.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
icon.svg feat: update explorer widget icons (#34018) 2024-06-12 10:44:22 +01:00
index.ts chore: Move the widget config to widget class (#26073) 2023-09-06 17:45:04 +05:30
schemaParser.test.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
schemaParser.ts fix: edge case to ignore parsing very large numbers (#37104) 2024-10-28 15:36:00 +05:30
schemaTestData.ts chore: add blank line eslint rule (#36369) 2024-09-18 19:35:28 +03:00
thumbnail.svg feat: enhanced widget card (#32211) 2024-04-09 02:16:46 +01:00