Focus last entry on enter

Question

Focus last entry on enter

Eduardo Gomez 4,316

I have a shopping list app, when you can create, share and view.

From the home screen, go can go to detail screen, where you can input new product, you can click on the plus icon to insert a new row.

What I want to do:

When I click on the plus button and insert a new row, I want to focus the new Borderless Entry. Additionally, I want to press enter, or return and create an end empty row and focus the entry

Github

https://github.com/eduardoagr/ShareCart

Since QA doesn't like my code, I am posting the github

0 comments

1 answer

Your answer

Answer 1

Surya Amrutha Vaishnavi Lanka (INFOSYS LIMITED) 1,960 Microsoft External Staff

Thanks for reaching out
In a CollectionView, each Entry is inside a DataTemplate and is created/recycled by virtualization. That makes it hard to directly reference and call Focus() on “the newly added row’s Entry”.

A common workaround is: drive focus from the ViewModel via a bindable property, and let the custom Entry focus itself when that property becomes true. This pattern is shown as a workaround for “focus next Entry in CollectionView” scenarios.

Create a custom Entry that focuses itself when a bindable flag becomes true Create something like MyEntry you can apply the same idea to your existing BorderlessEntry control
Add a “ShouldFocus” property to each row or item in your list. public class ShoppingRow : ObservableObject // or INotifyPropertyChanged { private string _text; public string Text { get => _text; set => SetProperty(ref _text, value); } private bool _shouldFocus; public bool ShouldFocus { get => _shouldFocus; set => SetProperty(ref _shouldFocus, value); } } In MAUI, pressing Enter/Return triggers the Entry completion flow (commonly handled via Completed / Return command patterns). This is also the reason the CommunityToolkit provides a focus-on-complete behavior.
When you press Enter/Return, add a new row and focus it code-behind Entry_Completed, or MVVM command (preferred) void Entry_Completed(object sender, EventArgs e) { if (BindingContext is YourViewModel vm) vm.AddRowAndFocus(); } Your repo already has a custom BorderlessEntry control folder. So you can implement the same IsExpectedToFocus bindable property inside your BorderlessEntry instead of creating FocusableEntry separately. That keeps your styling intact while enabling reliable focusing.

"Please try the steps shared above and let me know if this resolves the issue.

If it works, you may mark this reply as the Accepted Answer — this helps other customers with similar questions find the solution faster."

Eduardo Gomez 4,316

I already tried that, but I still have a weird behavior

Video Project 7

I updated my github

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ShareCart.Views.ShoppingDetailsPageView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:ShareCart.Controls"
    xmlns:loc="clr-namespace:LocalizationResourceManager.Maui;assembly=LocalizationResourceManager.Maui"
    xmlns:models="clr-namespace:ShareCart.Models"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:vm="clr-namespace:ShareCart.ViewModels"
    Title="{loc:Translate UI_CartDetails}"
    x:DataType="vm:ShoppingDetailsPageViewModel">
    <CollectionView x:Name="ProductList" ItemsSource="{x:Binding Products}">
        <CollectionView.Header>
            <StackLayout Orientation="Horizontal" Spacing="8">
                <Ellipse
                    Margin="30,20,0,0"
                    Fill="#3B6D11"
                    HeightRequest="8"
                    VerticalOptions="Center"
                    WidthRequest="8" />
                <Label
                    Margin="2,20,0,0"
                    Style="{x:DynamicResource SubtitleLabel}"
                    Text="{x:Binding ShoppingList.Products.Count,
                                     StringFormat='{0} items'}"
                    TextTransform="Uppercase" />
            </StackLayout>
        </CollectionView.Header>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Product">
                <Grid
                    Margin="10,2,0,0"
                    Padding="5"
                    ColumnDefinitions="*,40"
                    ColumnSpacing="6"
                    RowDefinitions="Auto,Auto">
                    <Border BackgroundColor="{x:AppThemeBinding Light={x:DynamicResource LightSurface}, Dark={x:DynamicResource DarkSurface}}" StrokeThickness="2">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="12" />
                        </Border.StrokeShape>
                        <Grid Padding="8,0,12,0" ColumnDefinitions="30,34,*">
                            <BoxView
                                BackgroundColor="{x:Binding AddedBy.BubbleColor}"
                                CornerRadius="30"
                                HeightRequest="30"
                                WidthRequest="30" />
                            <CheckBox
                                x:Name="ItemCheckBox"
                                Grid.Column="1"
                                Command="{x:Binding CheckStatusCommand,
                                                    Source={x:RelativeSource AncestorType={x:Type vm:ShoppingDetailsPageViewModel}}}"
                                CommandParameter="{x:Binding .}"
                                IsChecked="{x:Binding IsChecked}"
                                Color="Green" />
                            <controls:BorderlessEntry
                                Grid.Column="2"
                                Margin="5"
                                Keyboard="Text"
                                ReturnCommand="{x:Binding UploadCommand,
                                                          Source={x:RelativeSource AncestorType={x:Type vm:ShoppingDetailsPageViewModel}}}"
                                ReturnCommandParameter="{x:Binding .}"
                                ShouldFocus="{x:Binding ShouldFocus}"
                                Text="{x:Binding Name}" />
                        </Grid>
                    </Border>
                    <Border
                        Grid.Column="1"
                        BackgroundColor="#173404"
                        HeightRequest="48"
                        WidthRequest="40">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="12" />
                        </Border.StrokeShape>
                        <Button
                            Padding="0"
                            BackgroundColor="Transparent"
                            Command="{x:Binding AddProductCommand,
                                                Source={RelativeSource AncestorType={x:Type vm:ShoppingDetailsPageViewModel}}}"
                            Style="{x:DynamicResource IconButton}"
                            Text="&#xE145;" />
                    </Border>
                    <Label
                        Grid.Row="1"
                        FontAttributes="Bold"
                        FontSize="18">
                        <Label.FormattedText>
                            <FormattedString>
                                <FormattedString.Spans>
                                    <Span Text="{loc:Translate UI_Added}" />
                                    <Span Text="{x:Binding AddedBy.Username, TargetNullValue=''}" />
                                </FormattedString.Spans>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>


using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

using ShareCart.Interfaces;
using ShareCart.Models;

using System.Collections.ObjectModel;

namespace ShareCart.ViewModels;

public partial class ShoppingDetailsPageViewModel(
    IUserRepoService userRepoService,
    IShoppingListService shoppingListService,
    IAuthService authService,
    IMessenger messenger) : ObservableObject, IQueryAttributable {

    private IDisposable? _subscription;

    public Action? ScrollToEndRequested;


    [ObservableProperty]
    public partial ShoppingList? ShoppingList { get; set; }

    [ObservableProperty]
    public partial ObservableCollection<Product> Products { get; set; } = [];

    [ObservableProperty]
    public partial ObservableCollection<FirebaseUser> ShoppingCartMembers { get; set; } = [];

    public async void ApplyQueryAttributes(IDictionary<string, object> query) {

        if(!query.TryGetValue("listId", out var rawId))
            return;

        var id = rawId as string;
        if(string.IsNullOrEmpty(id))
            return;

        // Load list
        ShoppingList = await shoppingListService.GetShoppingListByIdAsync(id);

        if(ShoppingList == null)
            return;

        await LoadMembersAsync();
        await InitProductList();

        _subscription = shoppingListService.SubscribeToList(id, async () => {
            MainThread.BeginInvokeOnMainThread(async () => {
                ShoppingList = await shoppingListService.GetShoppingListByIdAsync(id);
                Refresh();
                if(Products.Count <= 0) {

                    await shoppingListService.DeleteShoppingListAsync(id);

                    Cleanup();

                    messenger.Send("Let's go home");

                    await Shell.Current.GoToAsync("..", true);


                }
            });

        });
    }

    private async Task Refresh() {
        await LoadMembersAsync();
        await InitProductList();
    }

    private async Task InitProductList() {

        if(Products == null)
            return;

        await HydrateProductsAsync();

        Products.Clear();

        if(ShoppingList?.Products == null)
            return;

        foreach(var item in ShoppingList.Products) {

            var product = item.Value;
            product.Id = item.Key;
            Products.Add(product);
        }


    }

    private async Task LoadMembersAsync() {

        if(ShoppingList == null)
            return;

        ShoppingCartMembers.Clear();

        var owner = await userRepoService.GetFirebaseUser(ShoppingList.OwnerId);

        if(owner != null)

            ShoppingCartMembers.Add(owner);

        if(ShoppingList.MemberIds != null) {
            foreach(var id in ShoppingList.MemberIds) {
                var member = await userRepoService.GetFirebaseUser(id);
                if(member != null)
                    ShoppingCartMembers.Add(member);
            }
        }
    }

    public async Task HydrateProductsAsync() {

        if(ShoppingList?.Products == null)
            return;

        foreach(var item in ShoppingList.Products.Values) {

            if(!string.IsNullOrEmpty(item.AddedById)) {

                item.AddedBy = await userRepoService.GetFirebaseUser(item.AddedById);
            }

        }
    }

    public void Cleanup() {
        _subscription?.Dispose();
        _subscription = null;
    }

    [RelayCommand]
    async Task CheckStatus(Product product) {

        if(product == null) return;

        if(ShoppingList == null) return;

        await shoppingListService.DeleteProductAsync(ShoppingList.Id, product.Id);

    }

    [RelayCommand]
    async Task AddProduct() {

        var currentUser = await userRepoService.GetFirebaseUser(authService.GetAuthUserID());

        Products.Add(new Product {
            ShouldFocus = true,
            AddedById = currentUser.Id,
            AddedBy = currentUser
        });

        ScrollToEndRequested?.Invoke();

    }

    [RelayCommand]
    async Task Upload(Product product) {

        if(product == null) return;

        await shoppingListService.AddProductAsync(ShoppingList!.Id, product);

        product.Name = string.Empty;

    }
}

VM

Share via

Focus last entry on enter

1 answer

Your answer