Semantic-UI-React icon indicating copy to clipboard operation
Semantic-UI-React copied to clipboard

Popup: on mobile device is not hidden

Open offcall opened this issue 7 years ago • 15 comments

Steps

  1. Open https://codepen.io/anon/pen/LOLKeZ via movile device
  2. Click on btn

Expected Result

Popup isn't attached to the button Similarly, if you open a modal window on a button with a tooltip, the tooltip will be on top of the modal window

Actual Result

Hide the popup, or recalculate its position

Version

0.76.0

Testcase

https://codepen.io/anon/pen/LOLKeZ https://codepen.io/anon/pen/JOJgdW or https://codesandbox.io/s/18l47oom0l https://codesandbox.io/s/zql531kp1m

offcall avatar Nov 14 '17 13:11 offcall

@lisonok your codepen examples infinitely load for me. Can you please create your example with this https://codesandbox.io/s/2l3n74j9y starting point?

brianespinosa avatar Nov 14 '17 23:11 brianespinosa

Yes, https://codesandbox.io/s/18l47oom0l https://codesandbox.io/s/zql531kp1m

offcall avatar Nov 15 '17 18:11 offcall

I tested this on an iPhone: Safari and Chrome. I think the issue is, that the on hover triggered popup is actually never closed on mobile. On mobile, you have no hover. The popup opens with the first click, the modal with the second. On desktop, it gets closed because the button loses its hover state as soon as the modal is overlapping it.

If you set on={'click'} the popup will close and open on click, and we will have the same issue on desktop as on mobile.

Further, on mobile, I can't close the modal by clicking on the dimmer.

jjjkkklll avatar Nov 16 '17 12:11 jjjkkklll

I think it would be better if set on="hover" then the tooltip should be shown for touch devices between touchstart and touchend events

offcall avatar Nov 17 '17 11:11 offcall

I don't have time to debug this at the moment, however, has anyone tried the known iOS fix?

See https://github.com/Semantic-Org/Semantic-UI-React/pull/1833#issuecomment-313713611.

levithomason avatar Nov 25 '17 17:11 levithomason

It didn't help

offcall avatar Dec 19 '17 11:12 offcall

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Mar 19 '18 11:03 stale[bot]

Hello, I still have this bug, tell me how it can be fixed

offcall avatar Mar 20 '18 16:03 offcall

I'm having the same bug, is any progress?

valentinaAl avatar May 10 '18 14:05 valentinaAl

is any progress?

rolandoarteagaram avatar Jul 02 '18 20:07 rolandoarteagaram

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

stale[bot] avatar Dec 29 '18 20:12 stale[bot]

Any progress on this issue?

pushkar1701 avatar Feb 18 '19 13:02 pushkar1701

Having the same issue

mansdahlstrom1 avatar Aug 06 '19 12:08 mansdahlstrom1

Looks like semantic-iu-react is just doesnt implement touchstart and touchend events for any of their components. This may be a dealbreaker for me.

apolopena avatar Jul 25 '20 05:07 apolopena

I know I am late to the discussion, and I certainly hope I am getting the point of it.., for anybody having a similar problem - I have solved it by adding the className='computer only' within the popup. Hope it helps.

emirbalic avatar Mar 09 '22 02:03 emirbalic