SwiftUI multiple TextField causing lags

Viewed 1020

I am using many TextFields in my SwiftUI Mac OS app. I am a main form, where the user adds data, which is composed of multiple Stacks/ views which contain TextFields/ and Text()

I noticed a strange bug, when I am using many TextFields combined in different views, I get some very heavy lags when selecting the TextField. Also when I skip to the next one with Tab it takes time.

It is really strange behavior and I am not sure what is causing that. I have a different view with many TextFields aswell, where everything is working smooth.

Also sometimes I can not jump back to the prior TextField with Shift+Tab.

Edit: I could figure out how to get rid of it. However, only if I remove one view. I don't want to.

My main container looks like that:

    HStack
    {
       //Left Side
       VStack{
           Text("Here is the next #1")
       }
       VStack
       {
           //The View posted below
           ViewBelow()
       }
    }

If I remove the first VStack, the issue is solved. Nothing lagging. If I add it, it is there again.

Just to give you a neckline of my code (many Stacks with TextFields)

 ZStack
 {
    VStack
    {
        HStack
        {
            Text("Personal Data")
                .font(.title)
                .fontWeight(.bold)
                .padding(.horizontal, 0)
                .padding(.vertical, 5)
            Spacer()
        }

        Divider()
            .padding(.bottom, 5)

        //Personal Data Types
        HStack(spacing: 0)
        {
            //Left Element
            VStack(alignment: .center)
            {
                Text("Vorname")
                    .foregroundColor(Color.gray)

            } .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

            //Right Elemenet
            VStack()
            {
                Text("Nachname")
                    .foregroundColor(Color.gray)
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

        }.frame(minWidth: 0, maxWidth: .infinity)

        HStack(spacing: 0)
        {
            VStack(alignment: .center)
            {
                //Left Element
                if (self.editMode)
                {
                    TextField("Enter some text", text: $s_test)
                        .frame(maxWidth:250)
                }
                else
                {
                    Text(self.person.firstName)
                        .font(.body)
                }

            } .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

            VStack()
            {
                //Left Element
                if (self.editMode)
                {
                    TextField("Enter some text", text: self.$s_test)
                        .frame(maxWidth:250)
                }
                else
                {
                    Text(self.person.lastName)
                        .font(.body)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

        }.frame(minWidth: 0, maxWidth: .infinity)
            .padding(.top, 0)


        //Personal Data Types
        HStack(spacing: 0)
        {
            //Left Element
            VStack(alignment: .center)
            {
                Text("Nickname")
                    .foregroundColor(Color.gray)

            } .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

            //Right Elemenet
            VStack()
            {
                Text("Birthday")
                    .foregroundColor(Color.gray)
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

        }.frame(minWidth: 0, maxWidth: .infinity)
            .padding(.top, 10)


        HStack(spacing: 0)
        {
            VStack(alignment: .center)
            {
                //Left Element
                if (self.editMode)
                {
                    TextField("Enter some text", text: self.$s_test)
                        .frame(maxWidth:250)
                }
                else
                {
                    Text(self.person.nickname)
                        .font(.body)
                }

            } .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

            VStack()
            {
                //Right Element
                if (self.editMode)
                {
                    TextField("Enter some text", text: self.$s_test)
                        .frame(maxWidth:250)
                }
                else
                {
                    Text(self.person.birthdate)
                        .font(.body)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)

        }.frame(minWidth: 0, maxWidth: .infinity)
            .padding(.top, 0)
      }

Maybe someone experienced the same already.. I am not quiet sure how to solve it. I removed many views, then it is working better. However I am not sure if it is just the quantity of TextFields or some bug in the other view.

I demonstrate the lag in the Gif. I press instantly when I hover above the TextField. See that lag..

enter image description here

0 Answers
Related