WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#30528 closed defect (bug) (fixed)

Focus v2: edge cases pressing Escape

Reported by: afercia Owned by: azaozz
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Editor Keywords: has-patch dev-feedback
Focuses: ui, javascript Cc:

Description

Spotted 2 edge weird cases with Focus v2, both related with pressing Escape, but seems they can't be reproduced in all browsers.

  1. Chrome 39 (can't reproduce in Firefox)
  • edit any post
  • type something and let Focus kick in
  • move your mouse out of sensible area or tab away from the editor
  • faded things reappear
  • now click on some empty area, for example the bottom of the left sidebar
  • press Escape
  • click inside the editor and type something

final result:

https://cldup.com/62CrjzjWKZ.png

  1. Firefox 33 (can't reproduce in Chrome)
  • edit any post
  • type something and let Focus kick in
  • with focus still inside the editor, press Escape just once
  • fadeIn() runs and faded things reappear but suddenly fadeOut() runs too and things fade again
  • press Escape again: same fadeIn/fadeOut effect

Attachments (2)

30528.diff (625 bytes) - added by adamsilverstein 6 years ago.
don't fade in fade out
30528.2.diff (1.4 KB) - added by adamsilverstein 6 years ago.
fix out/in refocus fade

Download all attachments as: .zip

Change History (12)

@adamsilverstein
6 years ago

don't fade in fade out

#1 follow-up: @adamsilverstein
6 years ago

30528.diff removed what appears to be an old handler. This corrects the firefox fadein/fade out behaviour when hitting escape - mentioned in the ticket. I haven't reproduced the chrome issue mentioned in the ticket

#2 @adamsilverstein
6 years ago

  • Keywords has-patch dev-feedback added

#3 in reply to: ↑ 1 @afercia
6 years ago

Thanks for the patch!
Replying to adamsilverstein:

I haven't reproduced the chrome issue mentioned in the ticket

I've tested on a second machine and couldn't reproduce too. Back to the first machine, it still happened. A quick look at dev tools showed this:

https://cldup.com/e4tPuEJ1I6.png

tried everything and finally it turned out was caused by this Chrome extension:

SEE 1.14
SEE lets you view the web as a user with a visual impairment might
https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn

Ironically, the code responsible for that was committed to don't "break complex websites by default anymore"
https://github.com/Q42/SEE/commit/3731ee1507cc6efe4e67b93b34653afb8e29100f

#4 @adamsilverstein
6 years ago

After a bit of sleep I realized the code removed in my patch is responsible for fading the elements back in if you mouse out then quickly back in - eg you 'accidentally' leave the edit area. Removing those lines breaks that behaviour so we will need something more robust - the event should not be firing at all in firefox. Working on that next...

@adamsilverstein
6 years ago

fix out/in refocus fade

#5 @adamsilverstein
6 years ago

30528.2.diff

  • fixes the escape fade out/fadein issue in firefox when pressing 'Escape' or Alt-Shift-W to exit focus mode
  • preserves the mouse friendly behaviour that fades things back out if you move the mouse out of the editor, then refocus the editor within the next second
  • passes the event thru to fadeIn, and doesn't set up the onFocus watch if event is defined (every other use), could be simpler (pass a boolean), thinking future use

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


6 years ago

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


6 years ago

#8 @azaozz
6 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 30625:

Editor: fix fading out on Escape in DFW v2. props adamsilverstein, fixes #30528.

#9 @iseulde
6 years ago

  • Milestone Awaiting Review deleted

#10 @helen
6 years ago

  • Milestone set to 4.1
Note: See TracTickets for help on using tickets.