Xamarin.forms: Span GestureRecognizer inaccuracies

[davidbritch]

Description

Previously I logged an issue for Forms 3.2 about gesture recognizer on Spans. While a TapGestureRecognizer worked on the Span, they were really finicky on iOS.

I've just tried a TapGestureRecognizer on a Span with Forms 3.3 and it's still finicky on iOS. It's also finicky on Android. Just less finicky.

Steps to Reproduce

1. Run the attached sample.
2. Tap the "Xamarin documentation" text in the Span.

Expected Behavior

The TapGestureRecognizer detects the tap and opens a browser on the Xamarin documentation page.

Actual Behavior

The TapGestureRecognizer detects the tap and opens a browser, provided you tap on specific areas of the text (e.g. the top of the "X" in "Xamarin". Tapping on the bottom of the "m" in "Xamarin" does nothing.

Basic Information

• Version with issue: 3.3
• Last known good version: 3.3.0.912540
• IDE: VSMac 7.6.9
• Platform Target Frameworks:
  
  
  
  • iOS: iOS 12
  
  
  • Android: API 27
  
  
• Android Support Library Version: 27.0.2.1

Reproduction Link

HyperlinkLabel.zip

[davidbritch]

Updates:

1. This is also a problem in the final 3.2 release.
2. I suspect it's more to do with a line wrapping issue. In the image below (iPhone 8 simulator) there are no problems with the gesture recognizer on the word "documentation", but there are on "Xamarin".

[hartez]

Confirmed. It's really easy to see with an Android emulator - turn on the developer mode touch tracking, move your mouse pointer to the bottom center of the "m" in Xamarin, and click. On the upper "Xamarin" label, nothing will happen, but on the bottom one the gesture will activate (as expected).

[hauteur]

I'm not positive if this is the same issue - but I'm also seeing it not register the tap if it is not the first span in the list.

If you add a FormattedString, and the span with the TapGestureRecognizer is first in the sequence, it recognizes the tap fine. If you put it second, the tap isn't registering.

[VitalyKnyazev]

For me it works on iPad in portrait mode, but does not in landscape

[Blin4ik91]

Same issue here, spans are not tapable on iOS or Android.
In my example the clickable words are linebreaked. (also when not linebreaked)

[adrianknight89]

@davidortinau Just wondering if this could get more love from the team? I have Terms of Service and Privacy Policy spans, but they are mostly not working as you have to tap several times to get them to work. I'd like such important links to be touch-friendly to potentially avoid any legal issues down the road.

[dhruvcom]

For me it works , the only case it fails to work is when orientation is changed to landscape and that too happens on iOS only, working for android though.

[hauteur]

Thinking about @davidbritch's comment back in October, I've also seen issues where multi-line labels aren't always accounted for in the height of the page. This got me wondering if the height of the label could be fixed and the contents spilling out. If so, that might account for the tap gesture issue as well as the layout issues I've seen.

Just a thought...

[mateuswolkmer]

Ok, so I'm running in the same issue and was able to get some information about the bug, and it's a little odd. In my case, TapGestureRecognizer used in a Span within a FormattedString within a Label's FormattedText doesn't work if the text of the span exceeds one line (wraps around). It works if the text is no more than just one line.

This works (label without FormattedText):

<Label HorizontalTextAlignment="Start" FontSize="Small" Margin="5,0" HeightRequest="50" BackgroundColor="Blue" Text="Ao se registrar você concorda com as nossas políticas de privacidade">
    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding OpenPrivacyPolicy}" />
    </Label.GestureRecognizers>
</Label>

Output:

This also works (span with just one line):

<Label HorizontalTextAlignment="Start" FontSize="Small" Margin="5,0" HeightRequest="50" BackgroundColor="Blue">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Ao se registrar você concorda com as nossas" TextColor="{StaticResource TextLightGrey}" BackgroundColor="Red">
                 <Span.GestureRecognizers>
                     <TapGestureRecognizer Command="{Binding OpenPrivacyPolicy}" />
                 </Span.GestureRecognizers>
              </Span>
         </FormattedString>
     </Label.FormattedText>
</Label>

Output:

This does not works (span with more than one line):

<Label HorizontalTextAlignment="Start" FontSize="Small" Margin="5,0" HeightRequest="50" BackgroundColor="Blue">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Ao se registrar você concorda com as nossas políticas de privacidade" TextColor="{StaticResource TextLightGrey}" BackgroundColor="Red">
                 <Span.GestureRecognizers>
                     <TapGestureRecognizer Command="{Binding OpenPrivacyPolicy}" />
                 </Span.GestureRecognizers>
              </Span>
         </FormattedString>
     </Label.FormattedText>
</Label>

Output:

Adding a second Span and adding the TapGestureRecognizer to it also doesn't work if the Span wraps around to another line.
So, for now, the workaround I see is using multiple labels within a StackLayout, that seems to work.

[skamlet]

I have the same issue on iOS, in portrait it works well, in landscape the span is not clickable.

[srivastava1july]

did anybody resolved this issue? I am facing the same issue. My app needs to work on iPad in landscape mode.

[jhaprasun]

For me it works on iPad in portrait mode, but does not in landscape. Please let us know when it will get fixed.

[morphinapg]

On my android app, if I have more than one clickable span on the same line, and click the last one, my app acts like I've clicked every one of them. If I click the second one, it opens the links for those first two only. Clicking the first clickable span on a line (or if it's the only one on that line) works perfectly fine. My app doesn't seem to have any issue recognizing my taps, it just thinks I've tapped too many of them. Thankfully with the way my app works, it's not a massive problem, but it's a bit of an annoyance.

I don't have an iOS version of my app, but my UWP app works perfectly fine.

[Braini01]

I have exactly the same observation as @morphinapg with the Android version of my app. It seems to be an Android only problem as it works perfectly fine for my iOS app.