shipshapecode/shepherd

classPrefix breaks target blocking

Open

#1,298 opened on Jan 15, 2021

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (622 forks)batch import
buggood first issue

Repository metrics

Stars
 (11,601 stars)
PR merge metrics
 (Avg merge 3m) (1 merged PR in 30d)

Description

If you specify a classPrefix in the tour options, any highlighted elements in steps where canClickTarget = true are still clickable because the following css selector breaks:

.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{
    pointer-events:none
}

The following custom css rule has to be added, taking into account the classPrefix:

.shepherd-target-click-disabled.walkthrough-shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.walkthrough-shepherd-enabled.shepherd-target *{
    pointer-events:none
}

Contributor guide

Research direction
Investigate how classPrefix is used in CSS class generation for shepherd elements. Look for a utility function that builds the class names (e.g., `shepherd target click disabled`) and ensure it prepends the prefix correctly. Then update the CSS stylesheet to use the dynamic class names.
Tech stack
javascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSS selectorsJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60