Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Popup not working #1255

Closed
DEfusion opened this issue Jan 30, 2017 · 7 comments
Closed

Popup not working #1255

DEfusion opened this issue Jan 30, 2017 · 7 comments

Comments

@DEfusion
Copy link

Steps

I copied the first example from the documentation:

<Popup
    trigger={<Button icon='add' />}
    content='Add users to your feed'
  />

When I hovered over the Button I get this error:

Uncaught TypeError: Cannot read property 'appendChild' of null at Portal._this.mountPortal (eval at <anonymous> (vendor-bundle.js:4693), <anonymous>:244:18)

Doing some digging I found that it wasn't picking up the mount node:

Portal.defaultProps
=> Object {closeOnDocumentClick: true, closeOnEscape: true, openOnTriggerClick: true, mountNode: null}

I looked at the code and the isBrowser code does return true for me in browser (though I copied and pasted it into my react component to test this).

In order to get the popup to work I have to set the prop mountNode={document.body}

Version

v0.18.1

I couldn't get this to fail for me in a codepen though so I'm not sure what's going on.
@levithomason
Copy link
Member

I can't imagine v0.18.1 is the actual version of SUIR you're using :) Could you confirm?

@DEfusion
Copy link
Author

Sorry don't know where I got that number from v0.64.4 is what I'm on :)

@SirWaddles
Copy link
Contributor

SirWaddles commented Feb 1, 2017 •
edited
Loading

I'm having the same issue when using a Dimmer with the page prop.

Running 0.64.4

@SirWaddles
Copy link
Contributor

SirWaddles commented Feb 1, 2017 •
edited
Loading

As far as I can tell, it looks like this commit is to blame.

In Portal.js, defaultProps is a static member of the class. These are evaluated on first execution.

the statement mountNode: isBrowser ? document.body : null is evaluated before the page loads, so document.body is null at that time.

@SirWaddles SirWaddles mentioned this issue Feb 1, 2017
Merged
@levithomason
Copy link
Member

Good eye, this should move to an inline ||operator instead.

@SirWaddles
Copy link
Contributor

My Pull Request only fixes the Dimmer, and probably not in the best way. It just seemed to solve my problem.

My problem is also potentially that I have the <script> tag in the <head> element as opposed to at the bottom of the page.

@levithomason
Copy link
Member

This should be fixed by #1267, thanks @SirWaddles.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@DEfusion @SirWaddles @levithomason