SwiftUI - conditional onChange

Question

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?

mallow · Accepted Answer · 2021-07-09 02:42:37Z

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()
    }
}

After feedback from @JoakimDanielson I've made a version with enum instead of 2 separate variables:

import SwiftUI

struct ContentView: View {
    
    enum Focus {
        case input1
        case input2
    }
    
    @State private var isFocused: Focus?
    
    @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, onEditingChanged: { (changed) in
                    if changed {
                        isFocused = Focus.input1
                    }
                })
                .keyboardType(.decimalPad)
                .onChange(of: string1, perform: { value in
                    if isFocused == .input1 {
                        int1 = Int(string1) ?? 0
                        int2 = int1 * multiplier
                        string2 = "\(int2)"
                        print("int1: \(int1)")
                    }
                })
                .background(isFocused == .input1 ? Color.yellow : Color.gray)
            }
            .multilineTextAlignment(.trailing)
            .font(.largeTitle)
            
            HStack {
                Spacer()
                Text("x2")
            }
            
            HStack {
                TextField("0", text: $string2, onEditingChanged: { (changed) in
                    if changed {
                        isFocused = Focus.input2
                    }
                })
                    .keyboardType(.decimalPad)
                    .onChange(of: string2, perform: { value in
                        if isFocused == .input2 {
                            int2 = Int(string2) ?? 0
                            int1 = int2 / multiplier
                            string1 = ("\(int1)")
                            print("int2: \(int2)")
                        }
                    })
                    .background(isFocused == .input2 ? Color.yellow : Color.gray)
            }
            .multilineTextAlignment(.trailing)
            .font(.largeTitle)
        }
        .padding()
    }
}

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

I was looking into something similar but I used an enum instead of 2 boolean properties which I think will give you more flexibility, specially if you add more text fields that gets updated like this
Good idea @JoakimDanielson Feel free to post your answer or edit mine.
@JoakimDanielson I've added second version. With enum. Thanks! It was really good idea. If you can see any space for improvements, feel free to add something or edit my code. Thanks for help! :)

Collectives™ on Stack Overflow

SwiftUI - conditional onChange

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related