search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.41k stars 1.99k forks source link

Guided Tour: Step visibility and positioning bug in Tabbed sections #33366

Open donpark opened 5 years ago

donpark commented 5 years ago

How to reproduce the bug:

  1. Reduce browser tab window height to something small, like 800.
  2. Navigate to an Atomic or Jetpack site's URL https://wordpress.com/settings/security/{site_slug}?tour=jetpackMonitoring. You should see a Tour Step under "Monitor your site's downtime" checkbox.
screenshot_683
  1. Click on Performance tab, then scroll down. You'll see the Step from the other tab displayed when it shouldn't.
screenshot_682
simison commented 5 years ago

Cc @automattic/luna because this is used in the Jetpack checklist

simison commented 5 years ago

Would using onTargetDisappear prop help here?

https://github.com/Automattic/wp-calypso/blob/59bdfeeb97eda4266ad39410cb0a074d2c88dbc8/client/layout/guided-tours/docs/API.md#props-1

donpark commented 5 years ago

Would using onTargetDisappear prop help here?

Yes if old targets are not rendered when tab switches. That's the norm for React but jQuery norm was to just hide or move offscreen.

donpark commented 5 years ago

Well, I just tried it and it didn't quite work as expected.

  1. onTargetDisappear handler that quits if target disappears will quit the tour when tab is changed but step did not re-appear without refresh.
  2. Tab URLs do not preserve the active tour so switching tab puts URL in a confused state.
  3. Other step (final) has no target so it is not tab sensitive and loiters around after tab switch.
davipontesblog commented 4 years ago

Moved to Jetpack Improved Onboarding for triaging.

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.