fix: Implement dynamic dropdown width in SelectField in JSONForm #37289
Conversation
…etter responsiveness and usability
…ng and cleanup on unmount
…rver is created on mount
github-actions
bot
added
JSON Form
WalkthroughThe pull request introduces enhancements and tests for the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
app/client/src/widgets/JSONFormWidget/fields/SelectField.test.tsx (1)
157-161: Ensure consistent mocking ofResizeObserver.You're mocking
window.ResizeObserverhere, while elsewhereglobal.ResizeObserveris used. For consistency, mockResizeObserveron the same object throughout your tests.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
app/client/src/widgets/JSONFormWidget/fields/SelectField.test.tsx(2 hunks)app/client/src/widgets/JSONFormWidget/fields/SelectField.tsx(4 hunks)
🧰 Additional context used
🪛 Biome
app/client/src/widgets/JSONFormWidget/fields/SelectField.test.tsx
[error] 137-138: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
🔇 Additional comments (4)
app/client/src/widgets/JSONFormWidget/fields/SelectField.tsx (3)
1-8: LGTM: Clean import organization
The new hooks are properly imported and organized with the existing imports.
236-236: LGTM: Proper dependency management
The dropDownWidth dependency is correctly added to the useMemo dependencies array.
119-141: Verify fix for trimmed options issue
Let's verify that this implementation resolves the reported issue of trimmed select options.
app/client/src/widgets/JSONFormWidget/fields/SelectField.test.tsx (1)
80-245: Tests enhance coverage and ensure component responsiveness.
🧰 Tools
🪛 Biome
[error] 137-138: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/11775999144. |
|
Deploy-Preview-URL: https://ce-37289.dp.appsmith.com |
rahulbarwal
deleted the
rahulbarwal/issue37279/Bug-Select-options-inside-JSONForm-getting-trimmed
branch
…smithorg#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 appsmithorg#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: 1438c99 > <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 -->
Description
Problem
The SelectField inside JSONForm widget's dropdown width was not dynamically adjusted, resulting in inconsistent responsiveness.
Root cause
The SelectField component's dropdown width was not being updated dynamically, causing the component to become too wide or too narrow, affecting its usability.
Solution
This PR enhances the SelectField component to adjust its dropdown width dynamically for improved responsiveness. This PR handles...
Fixes #37279
or
Fixes
Issue URLWarning
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
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11790765022
Commit: 1438c99
Cypress dashboard.
Tags:
@tag.JSONFormSpec:
Tue, 12 Nov 2024 04:59:15 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
SelectFieldcomponent for dynamic dropdown width adjustment based on its wrapper size.SelectField.Bug Fixes
isRequiredproperty.Tests
SelectField, including mock implementations forResizeObserverto validate resizing behavior.