Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-form-select] Fixed page jump within an Iframe/Embedded Browser #2773

Merged
merged 6 commits into from
Dec 17, 2019

Conversation

supreethmr
Copy link
Contributor

Summary

Resolves #2682

Additional Details

Page jump was happening at two scenarios where one is when single-select is opened before selecting dropdown items and another one is opening form-select when selection has been made.

  • menu.focus()
  • scrollIntoView()

Focus to menu(dropdown) was setting in opendropdown() method which triggers before PositionDropdown causing page to scroll to the top on form-select open.

scrollIntoView() is called to scroll into active option on dropdown open. ScrollIntoView causes page Jump as shown in Issue when used within Iframe. Hence replaced ScrollIntoView with ScrollTop of menu ( dropdown ).

@StephenEsser StephenEsser changed the title Fixed Page Jump issue Happening in form-select when used with-in Iframe / Embedded Browser [terra-form-select] Fixed page jump within an Iframe/Embedded Browser Dec 6, 2019
### Fixed
* Fixed Page Scroll Issue of form-select.
* when form-select is used with-in Iframe / Embeded browser clicking on toggle button to open dropdown scrolls page to top of the window.
* This error was discovered in powerchart application which uses Iframe to render Terra-components.
Copy link
Contributor

Choose a reason for hiding this comment

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

We should remove internal specific implementation from the change log list

Copy link
Contributor Author

Choose a reason for hiding this comment

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

removed : a428f6c

@@ -3,6 +3,10 @@ ChangeLog

Unreleased
----------
### Fixed
* Fixed Page Scroll Issue of form-select.
Copy link
Contributor

@StephenEsser StephenEsser Dec 6, 2019

Choose a reason for hiding this comment

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

Can these entries be consolidated? Each item in a list should be for a specific change, here there are three asterisks for one entry.

Example:

### Fixed 
* Fixed page scrolling when embedded within an iframe

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sure, updated change-log

@ShettyAkarsh
Copy link
Contributor

@supreethmr can you add the wdio test case for testing this changes using iframe. with tiny or small viewports ?

Copy link
Contributor

@ryanthemanuel ryanthemanuel left a comment

Choose a reason for hiding this comment

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

+1 with Akarsh's suggestion as well

@supreethmr
Copy link
Contributor Author

@supreethmr can you add the wdio test case for testing this changes using iframe. with tiny or small viewports ?

Added here : 5d47bff

@StephenEsser StephenEsser merged commit ce4c1c1 into master Dec 17, 2019
@StephenEsser StephenEsser deleted the select-pagejump branch December 17, 2019 20:07
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[terra-form-select] Clicking to view dropdown causes window to scroll to the top while embedded in mpage
5 participants