CodePane within Appear prevents navigating backwards

[AdamMaras]

Prerequisites

Feel free to delete this section if you have checked off all of the following.

• I've searched open issues to make sure I'm not opening a duplicate issue
• This issue not specific to spectacle-boilerplate (those issues should be opened here).
• I have read through the docs before asking a question
• I am using the latest version of Spectacle

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle)

`-- spectacle@5.2.0

What version of React are you using? (can be found by running npm list react)

`-- react@16.5.2

What browser are you using?

• Google Chrome Version 69.0.3497.100 (Official Build) (64-bit)
• Microsoft Edge 42.17134.1.0

What machine are you on?
Windows 10 PC

Describe the Problem

When using a CodePane inside an Appear block, the deck is unable to navigate backwards past the CodePane appearing.

Self-contained reproduction example:

import React from "react";

import { Appear, CodePane, Deck, Heading, Slide } from "spectacle";

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck>
        <Slide>
          <Heading>Slide 1</Heading>
        </Slide>
        <Slide>
          <Heading>Slide 2</Heading>
          <Appear>
            <CodePane source="CodePane" />
          </Appear>
        </Slide>
        <Slide>
          <Heading>Slide 3</Heading>
        </Slide>
      </Deck>
    );
  }
}

Expected behavior: Able to navigate both forward and backward through the entire deck, including things that Appear.

Actual behavior: As soon as a CodePane is put inside an Appear block, any backwards navigation on the slide with said CodePane and Appear block is disabled. No error message is provided.

Additional Information

(I don't know if this is a limitation of how CodePanes work; if it is, I couldn't find it anywhere in the documentation 😢.)

[ebrillhart]

Thanks @AdamMaras, we'll look into this

[ebrillhart]

hey @AdamMaras, try wrapping the codepane element inside a div as recommended here: #598

and let me know if that solves your problem!

[AdamMaras]

I can confirm that this workaround indeed fixes the problem, and that the Appear'd CodePanes are now behaving as expected.

Thanks!