react-stepzilla icon indicating copy to clipboard operation
react-stepzilla copied to clipboard

stepsNavigation doesn't work in all cases

Open janek26 opened this issue 8 years ago • 3 comments

Even in the Example it's not working reliable. If you click on the text (span element) e.g. "Step 1" it's not navigating back, and all styles are loss. If you click at the hook (before pseudo element of the span) it's working.

A fix would be great to guarantee consistency

janek26 avatar Jul 12 '17 00:07 janek26

Thanks for raising this, were you able to find a fix for this? I suspect it may be possible via CSS?

newbreedofgeek avatar Aug 08 '17 22:08 newbreedofgeek

It seems the span within each list item is capturing the click and not passing it to the li.

To get around that, there is some css you can use, although pointer-events may not work in older versions of IE.

            li span{
                pointer-events: none;
                display: inline-block;
            }

Note the display: inline-block because of Edge: https://stackoverflow.com/questions/43655765/ie-edge-pointer-events-none-not-working-on-span-tag

michaeladams avatar Aug 10 '17 02:08 michaeladams

Just a quick note: there's also an <em> element which is hidden in the default styles and shown on smaller screen. If you plan to use the workaround that @michaeladams stated you should ensure to include the <em> element as well.

.progtrckr li span, 
.progtrckr li em {
  pointer-events: none;
  display: inline-block;
}

olivermack avatar Feb 14 '19 09:02 olivermack