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.

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

[Modal] Option to make restoring focus, after a modal hides ,optional #433

Merged
merged 1 commit into from
Jan 28, 2019

Conversation

lubber-de
Copy link
Member

Description

Before a modal is shown, it saves the current focussed element and restores it, after the modal was hidden again.
In some cases this might be unwanted behavior, like in Semantic-Org/Semantic-UI#6198 , where i also adopted the Testcase, so i made refocus now optional by implementing a new option restoreFocus (default true to keep current behavior)

Testcase

https://jsfiddle.net/3nmLycdr/
This was taken and adjusted from the original PR

  • Make sure the viewport is small enough, so you must scroll down and the calendar won't be shown completely in the viewport
  • Scroll down to the calendar
  • Click either month or week buttons (so they get focus)
  • Scroll down to the last calendar row. The focussed buttons should not be visible in the viewport anymore
  • when the modal opens, just click cancel, so it closes again

When restoreFocus: true (behavior as before), the viewport now autoscrolls up to where the buttons are
When restoreFocus: false (set in the fiddle), the viewport stays where it is

The original PR was also forcing the code to have the element being visible to make it scroll. I don't think this should be forced, so i decided just to go with the additional setting... which exactly fixes, what the issue was originally made for.

Closes

Semantic-Org/Semantic-UI#6198

@lubber-de lubber-de added type/feat Any feature requests or improvements state/awaiting-reviews Pull requests which are waiting for reviews state/awaiting-docs Pull requests which need doc changes/additions tag/sui-issue Taken from an existing Issue/PR of SUI labels Jan 27, 2019
@lubber-de lubber-de added this to the 2.7.x milestone Jan 27, 2019
@lubber-de lubber-de added the lang/javascript Anything involving JavaScript label Jan 27, 2019
Copy link
Member

@y0hami y0hami left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Member

@ColinFrick ColinFrick left a comment

Choose a reason for hiding this comment

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

LGTM

@y0hami y0hami merged commit be9e4c3 into fomantic:develop Jan 28, 2019
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Jan 28, 2019
@lubber-de lubber-de modified the milestones: 2.7.x, 2.7.2 Jan 28, 2019
@lubber-de lubber-de added state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo and removed state/awaiting-docs Pull requests which need doc changes/additions labels Jan 28, 2019
@y0hami y0hami mentioned this pull request Feb 4, 2019
@lubber-de lubber-de deleted the fix/6198/modal_option_norefocus branch February 5, 2019 11:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang/javascript Anything involving JavaScript state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo tag/sui-issue Taken from an existing Issue/PR of SUI type/feat Any feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants