Not working on mobile

[mcallistersean]

I noticed a problem with this component in combination with the react-portal-hoc. It seems that touch events are caught by react-portal-hoc which closes the menu before the click event handler on the menu item has a chance to fire.

Changing the portal invocation wrapping MentionMenu to not close on click fixes the behaviour on mobile devices. It obviously introduces other problems such as the menu not closing when the textarea loses focus.

export default portal({ clickToClose: false, escToClose: true })(MentionMenu);

I could try to fix this, but will probably also need to touch the portal-hoc code in order to do so.
That and the release of react 16 with the portal functionality makes me wonder if it is worth the effort.

[mattkrick]

yeah, now that portals are native i haven't figured out what i wanna do with react-portal-hoc. i really wont need it moving forward, but i've still got some legacy stuff that'll need to be refactored. if you like i'll give you collab access to these repos & you can work on it, or we can just let it fall by the wayside & begin to embrace v16

[mcallistersean]

I've had a go at a solution yesterday in my fork:
https://github.com/mcallistersean/react-githubish-mentions/blob/master/src/MentionPortal.js
and usage here:
https://github.com/mcallistersean/react-githubish-mentions/blob/master/demo/src/App.js#L35-L42

It basically makes the portal implementation pluggable and removes the react-portal-hoc dependency , but my fork currently only works with React >= 16 if you want to use the portal implementation SimpleMentionPortal, which is currently the default, renders directly after the textarea, so no actual portal is being used and should work for older react versions.

[mattkrick]

oh that's delightful!
does the fallback work if the parent div has overflow: hidden? that's the only real reason i even both with portals.

[mcallistersean]

Not sure what implementation you mean by fallback. I have 2 implementations in the MentionPortal.js file:

• SimpleMentionPortal: simply renders the Menu after the texarea and positions it absolutely. It is affected by CSS properties such as overflow: hidden and position: absolute|relative on any ancestor element. Especially the non-default position property makes it hard to position the Menu correctly.

• ReactMentionPortal: creates a new div as a child of the body element and renders the Menu into that one, making it more robust against the aforementioned CSS properties (you can still break it by hiding the body overflow)

[mattkrick]

ah gotcha, fallback = SimpleMentionPortal.
i'll give it another few week & then refactor out the react-portal-hoc using the new native portals in all my libs & then just deprecate it.