Semantic-UI-React: node.contains is not a function in Portal click

Bug Report

Can’t actually create a valid bug report, looks like passed node is not a real DOM node. The issue appeared after this PR I suppose: https://github.com/Semantic-Org/Semantic-UI-React/pull/2384 Here is a similar issue in react dropzone https://github.com/react-dropzone/react-dropzone/issues/763 and here https://stackoverflow.com/questions/50133673/this-node-contains-does-not-work-if-this-node-is-a-ref-to-react-component

Expected Result

Clicks work as intended

Actual Result

No click events are fired

Node here is:

node: {…}
_reactInternalFiber: {…}
_reactInternalInstance: {…}
computeElementType:Button/<()
computeTabIndex:Button/<()
context: {}
focus:Button/<()
handleClick:Button/<()
hasIconClass:Button/<()
props: {…}
ref: {…}
refs: {}
state: null
updater: {…}
<prototype>: {…}

TypeError: node.contains is not a functiondoesNodeContainClick.js:25
    doesNodeContainClick doesNodeContainClick.js:25
    Portal Portal.js:59
    dispatchEvent event-stack.development.js:162
    dispatchEvent event-stack.development.js:284
    EventTarget event-stack.development.js:340
    forEach self-hosted:3739
    EventTarget event-stack.development.js:339

Version

0.88.1

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (7 by maintainers)

Most upvoted comments

Any updates? Would be nice, if you could fix this issue.

zgrybus on Feb 15, 2021

In my case (Styled Component issue) this simple trick has done the job:

const RefButton = props => <StyledButton {...props} />;

bionicvapourboy on Nov 22, 2019

Yup. looks like it’s StyledComponent button as trigger that is the cause

import { Button } from "semantic-ui-react";
import styled from "styled-components/macro";

import semanticStyles from "../../../semantic/exports.module.less";

export const LinkButton = styled(Button).attrs({
  //className: "tertiary"
})`
  color: ${semanticStyles.blue} !important;
  font-weight: normal !important;
  padding: 0 !important;
  background-color: transparent !important;
`;

<React.Fragment>
        <Modal
          centered={false}
          trigger={<LinkButton onClick={this.handleOpen}>{this.props.elementText}</LinkButton>}
          dimmer={"inverted"}
          open={this.state.modalOpen}
          onClose={this.handleClose}
          size={"large"}>
          <Modal.Header>{r.offerName}</Modal.Header>
          <Modal.Content scrolling>
            <OfferSkuMatchComponent
              isAdmin={isAdmin}
            />
          </Modal.Content>
          <Modal.Actions>
            <Button primary onClick={this.handleClose}>
              Закрыть
            </Button>
          </Modal.Actions>
        </Modal>
      </React.Fragment>

xumix on Sep 17, 2019