Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Select options inside JSONForm getting trimmed #37279

Closed
rahulbarwal opened this issue Nov 7, 2024 — with Slack · 0 comments · Fixed by #37289
Closed

Bug: Select options inside JSONForm getting trimmed #37279

rahulbarwal opened this issue Nov 7, 2024 — with Slack · 0 comments · Fixed by #37289
Assignees
@rahulbarwal
Labels
JSON Form Issue / features related to the JSON form wiget Select Widget Select or dropdown widget Task A simple Todo Widgets & Accelerators Pod Issues related to widgets & Accelerators Widgets Product This label groups issues related to widgets

Comments

@rahulbarwal Slack
Copy link
Contributor

New issue with select widget labels reported in Discord.
https://discord.com/channels/725602949748752515/1304046831776305242/1304046831776305242

Slack Message
@rahulbarwal rahulbarwal added JSON Form Issue / features related to the JSON form wiget Select Widget Select or dropdown widget labels Nov 7, 2024 — with Slack
@rahulbarwal rahulbarwal self-assigned this Nov 7, 2024
@Nikhil-Nandagopal Nikhil-Nandagopal added the Task A simple Todo label Nov 7, 2024
@github-actions github-actions bot added Widgets Product This label groups issues related to widgets Widgets & Accelerators Pod Issues related to widgets & Accelerators labels Nov 7, 2024
@rahulbarwal rahulbarwal mentioned this issue Nov 8, 2024
Merged
2 tasks
rahulbarwal added a commit that referenced this issue Nov 12, 2024
@rahulbarwal
fix: Implement dynamic dropdown width in SelectField in JSONForm (#37289
8cbf8a5 
)

## 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: 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 -->
github-actions bot pushed a commit to Zeral-Zhang/appsmith that referenced this issue Nov 20, 2024
@rahulbarwal
fix: Implement dynamic dropdown width in SelectField in JSONForm (app…
7b5e894 
…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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rahulbarwal rahulbarwal

Labels
JSON Form Issue / features related to the JSON form wiget Select Widget Select or dropdown widget Task A simple Todo Widgets & Accelerators Pod Issues related to widgets & Accelerators Widgets Product This label groups issues related to widgets
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Implement dynamic dropdown width in SelectField in JSONForm appsmithorg/appsmith
2 participants
@Nikhil-Nandagopal @rahulbarwal