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

fix(MdCheckbox): Cancel spacebar keydown events when component focused #181

Closed
wants to merge 1 commit into from

Conversation

traviskaufman
Copy link
Contributor

This commit ensures that when a checkbox element is focused, spacebar
keydown events will not bubble up to window, causing side effects like
page scrolling.

This commit also fixes an issue as part of this change where the
component could still be focused even when it was disabled.

Finally, some of the test code has been cleaned up and corrected.

Fixes #162

@googlebot googlebot added cla: yes PR author has agreed to Google's Contributor License Agreement labels Mar 16, 2016
@@ -192,6 +199,15 @@ export class MdCheckbox implements ControlValueAccessor {
this.toggle();
}

onFocus(evt: Event) {
window.addEventListener('keydown', this._focusWindowKeydownHandler);
Copy link
Member

Choose a reason for hiding this comment

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

There's actually a special syntax for doing this without directly touching window:

  host: {
    '(window:domEvent)': 'onWindowEvent($event.type)',
    '(document:domEvent)': 'onDocumentEvent($event.type)',
    '(body:domEvent)': 'onBodyEvent($event.type)'
  }

So you can do 'window:focus': 'myFocusHandler()'

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah that's way better. will change.

@traviskaufman
Copy link
Contributor Author

@jelbourn changes made!

* from bubbling when the component is focused, which prevents side effects like page scrolling
* from happening.
*/
onWindowKeyDown(evt: KeyboardEvent) {
Copy link
Member

Choose a reason for hiding this comment

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

As discussed in chat: just use keydown on the host element since it should only fire when it has focus anyway?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

👍 yeah I think I overthought it. Changed.

This commit ensures that when a checkbox element is focused, spacebar
`keydown` events will not bubble up to window, causing side effects like
page scrolling.

This commit also fixes an issue as part of this change where the
component could still be focused even when it was disabled.

Finally, some of the test code has been cleaned up and corrected.

Fixes angular#162
@jelbourn
Copy link
Member

LGTM

@jelbourn jelbourn closed this in 6db3511 Mar 17, 2016
andrewseguin pushed a commit to andrewseguin/components that referenced this pull request Oct 15, 2018
* Adds the `--depth` option when cloning the assets for the docs.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pressing space on MdCheckbox scrolls the page
3 participants