You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
DISCLAIMER: I am not sure if this is a bug on Semantic's end or on my end, that's why I am asking here for clarification.
Context
I have created a custom Modal component, not related to the Semantic UI one, because I needed some very custom behaviour.
However, I have retained a similar API to the semantic's Modal component, meaning my Modal takes a React element as a trigger to render, and as children the actual Modal's content
Now, inside my Modal's render method, because I need to call some of its own internal methods when the user clicks on the passed trigger element, I am doing a React.cloneElement() of the passed trigger and I return an enhancedTrigger element where I have overriden the original trigger element's onClick with a new onClick which also calls the original onClick. Something like this:
constenhancedTrigger=trigger=>cloneElement(trigger,{onClick: this.handleTriggerClick// this is my Modal's instance });
where this.handleTriggerClick() is
handleTriggerClick(e){// some codeconst{ trigger }=this.props;_.invoke(trigger,'props.onClick',e);this.setState({open: true},this.props.onOpen);}
My Modal simply renders the enhancedTrigger when not open and both an enhancedTrigger and the actual modal when it's open.
Now, I have a Semantic-UI Popup component, where I render a list of actions, one of which is my own Modal (remember, my Modal simply displays an enhancedTrigger element until it's clicked)
With this done, and my enhancedTrigger being rendered and shown in the DOM, when I click on the enhancedTrigger DOM node, the following thing happens, which makes no sense to me.
Inside Portal.js, lines 41-46
if(!_this.rootNode// not mounted||!_this.portalNode// no portal||_invoke(_this,'triggerNode.contains',e.target)// event happened in trigger (delegate to trigger handlers)||_invoke(_this,'portalNode.contains',e.target)// event happened in the portal)return;// ignore the click
the e.target, which should be the Modal's trigger DOM node, is never the DOM node that is rendered in the screen at that time. It's something with the exact same structure as the one displayed on screen but it's not actually in the DOM.
Inside my own handleTriggerClick though, the e.targetis the correct one, i.e. the one rendered on screen at that time
When I click on any other entry, which is not the enhancedTrigger, inside the Popup list, the Popup, does not close, as expected.
Now, if in my Modal I simply render the trigger that was passed as prop and not the enhancedTrigger that I create, the e.target in the Portal.js, lines 41-46, will be the correct one and the Popup will not close.
This does not make sense to me, since the element created with React.cloneElement() should have all of its properties referentially the same as the original trigger element's (except for the overriden onClick), and also point to the same DOM instance.
Am I missing something here with React.cloneElement() or what? Can somebody explain to me what goes wrong there with the e.target?
Thanks for taking the time to read all this
The text was updated successfully, but these errors were encountered:
@mkarajohn There are too many text and too less code 😕 Please share to us some real code on https://codesandbox.io/ and describe expected and actual behaviour.
DISCLAIMER: I am not sure if this is a bug on Semantic's end or on my end, that's why I am asking here for clarification.
Context
I have created a custom Modal component, not related to the Semantic UI one, because I needed some very custom behaviour.
However, I have retained a similar API to the semantic's Modal component, meaning my Modal takes a React element as a trigger to render, and as children the actual Modal's content
Now, inside my Modal's
render
method, because I need to call some of its own internal methods when the user clicks on the passedtrigger
element, I am doing aReact.cloneElement()
of the passedtrigger
and I return anenhancedTrigger
element where I have overriden the originaltrigger
element'sonClick
with a newonClick
which also calls the originalonClick
. Something like this:where
this.handleTriggerClick()
isMy Modal simply renders the
enhancedTrigger
when not open and both anenhancedTrigger
and the actual modal when it's open.Now, I have a Semantic-UI Popup component, where I render a list of actions, one of which is my own Modal (remember, my Modal simply displays an
enhancedTrigger
element until it's clicked)With this done, and my
enhancedTrigger
being rendered and shown in the DOM, when I click on theenhancedTrigger
DOM node, the following thing happens, which makes no sense to me.Inside Portal.js, lines 41-46
the
e.target
, which should be the Modal's trigger DOM node, is never the DOM node that is rendered in the screen at that time. It's something with the exact same structure as the one displayed on screen but it's not actually in the DOM.Inside my own
handleTriggerClick
though, thee.target
is the correct one, i.e. the one rendered on screen at that timeAs a result, the rest of the code is executed
and the Popup closes.
When I click on any other entry, which is not the
enhancedTrigger
, inside the Popup list, the Popup, does not close, as expected.Now, if in my Modal I simply render the
trigger
that was passed as prop and not theenhancedTrigger
that I create, thee.target
in the Portal.js, lines 41-46, will be the correct one and the Popup will not close.This does not make sense to me, since the element created with
React.cloneElement()
should have all of its properties referentially the same as the originaltrigger
element's (except for the overridenonClick
), and also point to the same DOM instance.Am I missing something here with
React.cloneElement()
or what? Can somebody explain to me what goes wrong there with thee.target
?Thanks for taking the time to read all this
The text was updated successfully, but these errors were encountered: