maui: Gestures don't work on Label Spans

Description

I added a gesture to a label span and tapped it. Nothing is happening on Windows. Cannot test Android bc it doesn’t render the span.

Steps to Reproduce

Run this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Pages.LabelPage"
             Shell.FlyoutBehavior="Disabled"
             >

    <ContentPage.Content>
        <ScrollView>
            <StackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">

                <Label LineBreakMode="NoWrap" LineHeight="1.4">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Font name: Default &#10;"/>
                            <Span Text="Version: 1.00  &#10;"/>
                            <Span Text="Digitally Signed, TrueType Outlines &#10;"/>
                            <Span Text="abcdefghijklmnopqrstuvwxyz "/>
                            <Span Text="abcdefghijklmnopqrstuvwxyz &#10;" TextTransform="Uppercase"/>
                            <Span Text="1234567890.:,;'+-*/=  &#10;"/>
                            <Span Text="12 The quick brown fox jumps over the lazy dog. 1234567890 &#10;" FontSize="12"/>
                            <Span Text="18 The quick brown fox jumps over the lazy dog. 1234567890 &#10;" FontSize="18"/>
                            <Span Text="24 The quick brown fox jumps over the lazy dog. 1234567890 &#10;" FontSize="24"/>
                            <Span Text="36 The quick brown fox jumps over the lazy dog. 1234567890 &#10;" FontSize="36"/>
                            <Span Text="48 The quick brown fox jumps over the lazy dog. 1234567890 &#10;" FontSize="48"/>
                            <Span Text="60 The quick brown fox jumps over the lazy dog. 1234567890 &#10;" FontSize="60"/>
                            <Span Text="72 The quick brown fox jumps over the lazy dog. 1234567890 " FontSize="72" >
                                <Span.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="https://google.com" />
                                </Span.GestureRecognizers>
                            </Span>
                        </FormattedString>
                    </Label.FormattedText>                    
                </Label>
            </StackLayout>
        </ScrollView>

    </ContentPage.Content>
</ContentPage>

using System.Windows.Input;

namespace ControlGallery.Pages;

public partial class LabelPage : ContentPage
{
    public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));

    public LabelPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}
image

Screenshot_1645061133

Version with bug

Preview 13 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

All

Did you find any workaround?

No workaround

Relevant log output

No response

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 22
  • Comments: 36 (5 by maintainers)

Most upvoted comments

I’m kind of disappointed that an issue that has

  • been open for over a year
  • has one of the most comments and upvotes of any issue
  • numerous complaints and duplicate issues

And somehow only made it to GA Servicing.

The triaging of issues has been better, this issue should have been better prioritized.

+18
daltzctr on Oct 1, 2023

Any update on this for Windows? I just want to know if this is going to make it into .NET GA 8 for Windows?

+10
daltzctr on Sep 5, 2023

Perhaps someone wrote this already, but I didn’t see it. You can solve this problem if you just use a label. Tested only for Android, there is no way to check for iOS, maybe someone can write down how it will work for iOS Example:

<Label Text="Forgot password"
    Style="{StaticResource MessageText}">
    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding GoToForgotPasswordPageCommand}"/>
    </Label.GestureRecognizers>
</Label>

Or this way if you used several spans:

<HorizontalStackLayout HorizontalOptions="Center">
    <Label Text="Don't have an account? " HorizontalTextAlignment="End" Style="{StaticResource MessageText}"></Label>
    <Label Text="Sign Up" HorizontalTextAlignment="End" Style="{StaticResource MessageTextGreen}">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding GoToSignUpPageCommand}"/>
        </Label.GestureRecognizers>
    </Label>
</HorizontalStackLayout>
+8
Octopon on Oct 1, 2023

When will this be fixed? We have been waiting for ages for this fix

+8
ninaada on Apr 18, 2023

This is still broken in Windows, and I don’t see a corresponding open PR @jfversluis

+6
daltzctr on Jul 6, 2023

Almost a year now and this is still an open issue? Can we developers help you speed up the process to get this fixed?

+6
bryancass on Jan 17, 2023

I’m a little confused about how this issue is being processed. It’s since .NET 6 rc that it keeps being postponed in milestones.

.NET 8 sr1 still has to be released and it’s currently scheduled for .NET 8 sr3 (.NET 7 sr3 was released at the end of January). Can’t understand whether it’s that hard to solve or MAUI team isn’t giving it priority.

Honestly, I wouldn’t know how to insert an hyperlink inside a long text without this issue being solved.

+4
riccardominato on Dec 12, 2023

This is currently still an issue in .NET 8.0 GA

+4
LennoxP90 on Nov 22, 2023

I’ve noticed that if you put a TapGestureRecognizer on the label, the TapGestureRecognizers on the spans also work

<Label ....>
    <Label.FormattedText>
        ... put your spans here with TapGestureRecognizer 
    </Label.FormattedText>
    <Label.GestureRecognizers>
        <TapGestureRecognizer Tapped="LegalLabel_Tapped" />
    </Label.GestureRecognizers>
</Label>

The TapGestureRecognizer on the label doesn’t have to do anything, it can be just empty

+4
tom-b-iodigital on Oct 25, 2022

The original fix for this was being done in #12027, but the PR was getting large and making it difficult to test/review/merge. So it’s being broken up into individual fixes for each platform. We’ll try to list those here so folks can track the progress.

The first one is for Android: #14410

+3
hartez on Apr 19, 2023

I’m new to MAUI/Xamarin but having a tappable link in the flow of some text seems like a pretty essential capability. I’m starting an app similar to Twitter and would like to have clickable hashtags in the flow of text.

Is there a workaround, maybe using a label and TextType.Html? Is it possible to capture a tap on an HTML a[href] tag?

+3
ghorsey on Oct 20, 2022

Agreed - this needs to be fixed, posted this on StackOverflow (12-Sep-2022) as well:

https://stackoverflow.com/questions/73695949/net-maui-how-to-include-a-link-in-a-label

@TimVanDyke - Thanks, corrected code (was missing a closing quote on the Text attribute):

<Label Text="Testing">
    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding MyDummyCommand}" />
    </Label.GestureRecognizers>
</Label>
+3
bdcoder2 on Nov 11, 2022

We’ve moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

+3
msftbot[bot] on Aug 23, 2022

Hi - Just want to report there is this exact same issue in iOS .NET8 GA Release as well (TapGestureRecognizer not firing for Spans). Android is working fine though. This is quite annoying as we have hyperlinks inside formatted text blocks in current App being migrated & not sure what sort of workaround is possible.

+2
mobilewares on Nov 27, 2023

I needed a gesture on a label. I came across this and was tinkering a bit. It’s not on a label span but this does appear to be working if you need a temporary workaround.

I’m very new to Maui, this might not be what y’all are looking for but I do hope this helps someone.

Edit: Fixed missing quote on command binding (Thank you @bdcoder2 )

<Label Text="Testing>
    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding MyDummyCommand}" />
    </Label.GestureRecognizers>
</Label>
+2
TimVanDyke on Sep 14, 2022

I have this issue as well on iOS. Seems like a basic feature that should be available in .NET MAUI - especially since it worked in Xamarin.Forms.

+1
donatellijl12 on Dec 12, 2023

Keeping this open for the iOS PR to complete: https://github.com/dotnet/maui/pull/15544

+1
jfversluis on Jun 27, 2023

Yes thank you, I saw the pull request, but I believe it’s still being worked on. I can help test the changes, but I am not sure how to do that in github.

+1
bryancass on Jan 17, 2023

¿Casi un año y esto sigue siendo un tema abierto? ¿Podemos los desarrolladores ayudar a acelerar el proceso para solucionar esto?

supposedly it’s fixed: https://github.com/dotnet/maui/pull/12027

+1
angelru on Jan 17, 2023

Why was this not included in the update days ago?

+1
angelru on Dec 18, 2022

Is there any fix for this yet? We are migrating an app written in forms and this is a bit of a blocker for us.

+1
ninaada on Aug 30, 2022

@PureWeen, @samhouts Did this fall through the cracks? It’s listed as being part of 6.0.300-servicing, but no fix made it into even the latest release.

+1
philipag on Aug 21, 2022

This issue persists. ETA on the fix?

+1
danielftz on Aug 19, 2022
Read more comments on GitHub
← maui: FilePicker on MacOS does not always return the file picked
maui: Hot Reload Problem : Read out of bounds →