search

sstur / react-rte

Pure React rich text WYSIWYG editor based on draft-js.
https://react-rte.org
ISC License
2.86k stars 430 forks source link

Link popover stops working with react-dom 17 #409

Closed rahul-dealroom closed 2 years ago

rahul-dealroom commented 3 years ago

The code fix for react 17 not necessarily work with react-dom 17 especially with the link popover part

robert-commonsku commented 3 years ago

_toggleShowLinkInput() seems to be firing twice when the link button is pressed. Adding event.stopPropagation() should fix it.

rahul-dealroom commented 3 years ago

okay thanks @robert-commonsku this fix/change needs to be done on the library itself right?

robert-commonsku commented 3 years ago

Yes. I have no affiliation with this library except as a user. I just noticed this problem when I upgraded react. I was able to resolve it by monkey-patching node_modules/react-rte/dist/react-rte.js to include a call to stopPropagation in the _toggleShowLinkInput function.

Blubagoo commented 3 years ago

Where exactly would i put the event.stopPropogation function? This is where I have it currently and am not seeing a change in behavior. image

Am I referencing the wrong variable?

robert-commonsku commented 3 years ago

{key:"_toggleShowLinkInput",value:function(t){t.stopPropagation();var e=this.state.showLinkInput;if(e){var n=!0;if(t&&"click"===t.type){var r=ut.a.findDOMNode(this).parentNode,i=document,o=i.activeElement;null==o||o===document.body||r.contains(o)||(n=!1)}n&&this.props.focusEditor()}this.setState({showLinkInput:!e})}} The t.shopPropagation(); at the beginning of the function is what I added to resolve this issue.

Blubagoo commented 3 years ago

Amazing thank you so much

On Thu, Jun 24, 2021 at 4:50 PM robert-commonsku @.***> wrote:

{key:"_toggleShowLinkInput",value:function(t){t.stopPropagation();var e=this.state.showLinkInput;if(e){var n=!0;if(t&&"click"===t.type){var r=ut.a.findDOMNode(this).parentNode,i=document,o=i.activeElement;null==o||o===document.body||r.contains(o)||(n=!1)}n&&this.props.focusEditor()}this.setState({showLinkInput:!e})}} The t.shopPropagation(); at the beginning of the function is what I added to resolve this issue.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/sstur/react-rte/issues/409#issuecomment-867942622, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGNK3JAADYRK33PBT2AJJWLTUOLBPANCNFSM46XD3WYQ .

-- Jim Tisdale, Full Stack Web Developer program, Thinkful.com

ericfong commented 3 years ago

I added this commit in our own repo https://github.com/schooltracs/react-rte/commit/1d1ca8f122a139bdb2f31d2d10ede0a7e24c7596