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

Autocomplete: Add position prop #2846

Draft
wants to merge 24 commits into
base: main
Choose a base branch
from
Draft

Autocomplete: Add position prop #2846

wants to merge 24 commits into from

Conversation

ElishaSamPeterPrabhu
Copy link
Collaborator

@ElishaSamPeterPrabhu ElishaSamPeterPrabhu commented Sep 11, 2024 •
edited
Loading

Description

  • Added position prop for the options container
  • Used popper library for the options container's position

References
Fixes #2801
References #2783

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

How Has This Been Tested?

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings

@ElishaSamPeterPrabhu ElishaSamPeterPrabhu linked an issue Sep 11, 2024 that may be closed by this pull request
Autocomplete: Add "position" property to control component placement relative to the element #2801
Open
2 tasks
@netlify Netlify
Copy link

netlify bot commented Sep 11, 2024 •
edited
Loading

✅ Deploy Preview for moduswebcomponents ready!

Name Link
🔨 Latest commit 451ff3d
🔍 Latest deploy log https://app.netlify.com/sites/moduswebcomponents/deploys/67b6f7dad7bd03000826837c
😎 Deploy Preview https://deploy-preview-2846--moduswebcomponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 45 (🟢 up 2 from production)
Accessibility: 75 (no change from production)
Best Practices: 92 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@prashanth-offcl prashanth-offcl removed a link to an issue Sep 11, 2024
Autocomplete: Add "position" property to control component placement relative to the element #2801
Open
2 tasks
@prashanth-offcl prashanth-offcl linked an issue Sep 11, 2024 that may be closed by this pull request
Autocomplete: Add "position" property to control component placement relative to the element #2801
Open
2 tasks
prashanth-offcl
prashanth-offcl reviewed Sep 11, 2024
View reviewed changes
Copy link
Contributor

@prashanth-offcl prashanth-offcl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ElishaSamPeterPrabhu Once I select an option from the bottom of the list, I'm not able to change it.

User.Inputs._.Autocomplete.-.Default.Storybook.-.Google.Chrome.2024-09-12.00-17-54.mp4

@prashanth-offcl prashanth-offcl marked this pull request as draft September 11, 2024 18:49
@ElishaSamPeterPrabhu
Copy link
Collaborator Author

@ElishaSamPeterPrabhu Once I select an option from the bottom of the list, I'm not able to change it.

User.Inputs._.Autocomplete.-.Default.Storybook.-.Google.Chrome.2024-09-12.00-17-54.mp4

Added animation change as fix

@ElishaSamPeterPrabhu ElishaSamPeterPrabhu force-pushed the 2801-autocomplete-add-position-property-to-control-component-placement-relative-to-the-wrapped-item branch from 8604b9d to d6ba058 Compare September 12, 2024 11:12
@ElishaSamPeterPrabhu ElishaSamPeterPrabhu marked this pull request as ready for review September 12, 2024 11:12
@ElishaSamPeterPrabhu
Merge branch '2801-autocomplete-add-position-property-to-control-comp…
bb2dc2d 
…onent-placement-relative-to-the-wrapped-item' of https://github.com/trimble-oss/modus-web-components into 2801-autocomplete-add-position-property-to-control-component-placement-relative-to-the-wrapped-item
@prashanth-offcl prashanth-offcl marked this pull request as draft September 13, 2024 11:08
@ElishaSamPeterPrabhu ElishaSamPeterPrabhu marked this pull request as ready for review September 16, 2024 05:23
@prashanth-offcl prashanth-offcl marked this pull request as draft September 30, 2024 09:50
ElishaSamPeterPrabhu and others added 3 commits February 17, 2025 11:38
@ElishaSamPeterPrabhu
Merge branch 'main' into 2801-autocomplete-add-position-property-to-c…
bc511a9 
…ontrol-component-placement-relative-to-the-wrapped-item
@ElishaSamPeterPrabhu
update css
ba4e2cf
@ElishaSamPeterPrabhu
Merge branch 'main' into 2801-autocomplete-add-position-property-to-c…
2d012a7 
…ontrol-component-placement-relative-to-the-wrapped-item
@ElishaSamPeterPrabhu ElishaSamPeterPrabhu marked this pull request as ready for review February 17, 2025 07:39
@ElishaSamPeterPrabhu ElishaSamPeterPrabhu requested a review from a team as a code owner February 17, 2025 07:39
@ElishaSamPeterPrabhu
Copy link
Collaborator Author

@ElishaSamPeterPrabhu Once I select an option from the bottom of the list, I'm not able to change it.

User.Inputs._.Autocomplete.-.Default.Storybook.-.Google.Chrome.2024-09-12.00-17-54.mp4

Addressed as part of issue #2282 in PR #2484

@ElishaSamPeterPrabhu
Merge branch 'main' into 2801-autocomplete-add-position-property-to-c…
147f883 
…ontrol-component-placement-relative-to-the-wrapped-item
@Kavin-Trimble
Copy link
Collaborator

Kavin-Trimble commented Feb 18, 2025 •
edited
Loading

Issues Noted:

  1. Position property is added twice in 'With Custom Option' canvas (Autocomplete)

  2. The Autocomplete Dropdown is jumping up when user scrollng it when it is at the bottom

  3. The dropdown width is not matching with the column width (Table: Inline Editing)
    image

  4. When the summary row is enabled, it overlaps the dropdown(Table: Inline editing)
    image

  5. The dropdown is still hidden (Table: Large Dataset)
    image

@ElishaSamPeterPrabhu
Copy link
Collaborator Author

Issues Noted:

  1. Position property is added twice in 'With Custom Option' canvas (Autocomplete)
  2. The Autocomplete Dropdown is jumping up when user scrollng it when it is at the bottom
  3. The dropdown width is not matching with the column width (Table: Inline Editing)
    image
  4. When the summary row is enabled, it overlaps the dropdown(Table: Inline editing)
    image
  5. The dropdown is still hidden (Table: Large Dataset)
    image

The second point occurs because of the div space offered :

jump.-.Made.with.Clipchamp.mp4

Moving the canvas can give us our expected outcome, hence its not a jump its a way of popper handling the visible options at all times.
The fifth point is an existing issue and can be addressed as a seperate issue.
All the other points are addressed.

@ElishaSamPeterPrabhu
addressed css
9892954
@ElishaSamPeterPrabhu
Merge branch '2801-autocomplete-add-position-property-to-control-comp…
90e48b7 
…onent-placement-relative-to-the-wrapped-item' of https://github.com/trimble-oss/modus-web-components into 2801-autocomplete-add-position-property-to-control-component-placement-relative-to-the-wrapped-item
@ElishaSamPeterPrabhu
modify stories
c2a14a8
@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@Kavin-Trimble
Copy link
Collaborator

Observed that the dropdown is not adjusted when adding/removing inputs with multiple lines
image
image

@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@ElishaSamPeterPrabhu
Copy link
Collaborator Author

Observed that the dropdown is not adjusted when adding/removing inputs with multiple lines image image

Addressed @Kavin-Trimble

@e-tools-sonar-prod E-Tools Sonar Prod

This comment has been minimized.

Sign in to view
@ElishaSamPeterPrabhu ElishaSamPeterPrabhu marked this pull request as draft February 20, 2025 09:37
@ElishaSamPeterPrabhu
Merge branch 'main' into 2801-autocomplete-add-position-property-to-c…
451ff3d 
…ontrol-component-placement-relative-to-the-wrapped-item
@e-tools-sonar-prod E-Tools Sonar Prod
Copy link

Failed

  • 0.00% Coverage on New Code (is less than 80.00%)

Analysis Details

3 Issues

  • Bug 0 Bugs
  • Vulnerability 0 Vulnerabilities
  • Code Smell 3 Code Smells

Coverage and Duplications

  • Coverage 0.00% Coverage (0.00% Estimated after merge)
  • Duplications 0.00% Duplicated Code (14.10% Estimated after merge)

Project ID: Modus.trimble:ModusWebComponents

View in SonarQube

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@prashanth-offcl prashanth-offcl prashanth-offcl left review comments

@coliff coliff Awaiting requested review from coliff coliff is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Autocomplete: Add "position" property to control component placement relative to the element
3 participants
@ElishaSamPeterPrabhu @Kavin-Trimble @prashanth-offcl