UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: SwiftUI - conditional onChange

Forums > SwiftUI

I have 2 TextFields: --- x2 ---

I want to perform simple calculations: string1 x 2 = string2. I am using .onChange modifier, so if you type first number it is multiplied by 2 and result is printed in second TextField. You can go the other way around and type string2 and it will be divided by 2 and result will be printed in the first TextField.

Now because both TextFields have .onChange, it gets triggered few times (3 in this case). After changing string1, string2 gets updated. And as it changed, .onChange of string2 is triggered and later the same with .onChange of string1.

Please run this example code and check what gets printed in console:

import SwiftUI

  struct ContentView: View {
    @State private var string1: String = ""
    @State private var int1: Int = 0

    @State private var string2: String = ""
    @State private var int2: Int = 0

    let multiplier: Int = 2

    var body: some View {
        VStack {
          HStack {
            TextField("0", text: $string1)
              .keyboardType(.decimalPad)
              .onChange(of: string1, perform: { value in
                string1 = value
                int1 = Int(string1) ?? 0
                int2 = int1 * multiplier
                string2 = "\(int2)"
                print("int1: \(int1)")
              })
          }
          .multilineTextAlignment(.trailing)
          .font(.largeTitle)
          .background(Color(UIColor.systemGray5))

          HStack {
            Spacer()
            Text("x2")
          }

          HStack {
            TextField("0", text: $string2)
              .keyboardType(.decimalPad)
              .onChange(of: string2, perform: { value in
                string2 = value
                int2 = Int(string2) ?? 0
                int1 = int2 / multiplier
                string1 = ("\(int1)")
                print("int2: \(int2)")
              })
          }
          .multilineTextAlignment(.trailing)
          .font(.largeTitle)
          .background(Color(UIColor.systemGray5))
        }
        .padding()
    }
  }

  struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      ContentView()
    }
  }

Question:

How to make .onChange conditional so it runs only once? To be precise, I want to execute .onChange on first input ONLY when I edit first input. And execute .onChange on second input ONLY when I edit second input.

Probably it will be easy with .onFocus in iOS 15. But how to do it in iOS 14?

2      

OK, I've figured it out :) I needed two variables, one per TextField: isFocused1, isFocused2. Each of them changes to true with onEditingChanged. And each onChange has if condition that checks if isFocused for this TextField is true.

Now onChange is triggered only if each TextField is being edited. I have added changing background colors to visualize focus changes.

Working code:

import SwiftUI

struct ContentView: View {
    @State private var string1: String = ""
    @State private var int1: Int = 0

    @State private var string2: String = ""
    @State private var int2: Int = 0

    let multiplier: Int = 2

    @State private var isFocused1 = false
    @State private var isFocused2 = false

    var body: some View {
        VStack {
            HStack {
                TextField("0", text: $string1, onEditingChanged: { (changed) in
                    isFocused1 = changed
                })
                .keyboardType(.decimalPad)
                .onChange(of: string1, perform: { value in
                    if isFocused1 {
                        int1 = Int(string1) ?? 0
                        int2 = int1 * multiplier
                        string2 = "\(int2)"
                        print("int1: \(int1)")
                    }
                })
                .background(isFocused1 ? Color.yellow : Color.gray)
            }
            .multilineTextAlignment(.trailing)
            .font(.largeTitle)

            HStack {
                Spacer()
                Text("x2")
            }

            HStack {
                TextField("0", text: $string2, onEditingChanged: { (changed) in
                    isFocused2 = changed
                })
                    .keyboardType(.decimalPad)
                    .onChange(of: string2, perform: { value in
                        if isFocused2 {
                            int2 = Int(string2) ?? 0
                            int1 = int2 / multiplier
                            string1 = ("\(int1)")
                            print("int2: \(int2)")
                        }
                    })
                    .background(isFocused2 ? Color.yellow : Color.gray)
            }
            .multilineTextAlignment(.trailing)
            .font(.largeTitle)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.