TextField with Double clear button / currency format for string value

Question

Created Apr ’24

Replies 2

Boosts 0

Participants 2

I have TextField which was binded to a variable "checkAmount" type Double. I want to create functionality, then the user clicks on the TextField - clear initial value 0.0 so the user doesn't have to delete it themself and also add currency sign after user input:

    @State private var checkAmount = 0.0
    @FocusState private var checkAmountIsFocused: Bool
    var totalPerPerson: Double {
        // calculations including (Double(checkAmount) ?? 0)
        return 0.0
    }
    
    var body: some View {
        NavigationStack {
            Form {
                Section("Check amount") {
                    HStack {
                        TextField("Enter check amount", value: $checkAmount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                            .keyboardType(.decimalPad)
                            .focused($checkAmountIsFocused)
                    }
                    
                }
            }.navigationTitle("We split")
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()
                        if checkAmountIsFocused {
                            Button("Done") {
                                checkAmountIsFocused = false
                            }
                        }
                    }
                }
        }
    }
}

The problem is, looks like it's impossible. So I decided to turn the variable "checkAmount" into a String type. But in this case, I can't add a currency sign to the value:

    @State private var checkAmount = ""
    @FocusState private var checkAmountIsFocused: Bool
    var totalPerPerson: Double {
        // calculations including (Double(checkAmount) ?? 0)
        return 0.0
    }
    
    var body: some View {
        NavigationStack {
            Form {
                Section("Check amount") {
                    HStack {
                        TextField("Enter check amount", text: $checkAmount)
                            .keyboardType(.decimalPad)
                            .focused($checkAmountIsFocused)
                        
                        if !checkAmount.isEmpty {
                            Button {
                                checkAmount = ""
                            }label: {
                                Image(systemName: "multiply.circle.fill")
                            }
                        }
                    }
                    
                }
            }.navigationTitle("We split")
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()
                        if checkAmountIsFocused {
                            Button("Done") {
                                checkAmountIsFocused = false
                            }
                        }
                    }
                }
        }
    }
}

Could someone please tell me the best way to handle it? Looked over the Internet and the usual clear button can be easily used with a string value, but I have no idea how to add a currency sign into the user's input and use it in calculations at the same time. Thank you!

Boost

Answer 1

Claude31 OP

Apr ’24

Accepted Answer

I may have a solution to propose. It is a bit circumvolved, but seems to do the job.

Idea is to have 2 TextFields that overlap, and select which one is tab the front in a ZStack (with zIndex), and change focus as needed.

I have set coloured background so that you can track what's happening and also hide the overlapped field.

struct ContentView: View {
    
    @State private var checkAmount : Double = 0.0
    @State private var valueToEnter = true
    @FocusState private var checkAmountIsFocused: Bool
    @FocusState private var checkAmount2IsFocused: Bool
    var totalPerPerson: Double {
        // calculations including (Double(checkAmount) ?? 0)
        return 0.0
    }
    
    private let quantityFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.locale = Locale.current
        formatter.numberStyle = .decimal
        formatter.minimumFractionDigits = 2
        formatter.maximumFractionDigits = 2
        formatter.zeroSymbol = ""
        return formatter
    }()

    var body: some View {
        NavigationStack {
            Form {
                Section("Check amount") {
                    ZStack {
                        TextField("Enter check amount", value: $checkAmount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                            .keyboardType(.decimalPad)
                            .focused($checkAmountIsFocused)
                            .onTapGesture {  // onTap, we shall change focus
                                valueToEnter = false  // That puts this field behind and the "yellow" at the front
                                checkAmount = 0  // quantityFormatter will not display any content in the yellow field
                                checkAmountIsFocused = false
                                checkAmount2IsFocused = true
                            }
                            .background(.green) // replace by Color(UIColor.systemBackground)
                            .zIndex(valueToEnter ? 1 : 0)
                        
                        TextField("", value: $checkAmount, formatter: quantityFormatter)
                            .keyboardType(.decimalPad)
                            .focused($checkAmount2IsFocused)
                            .onSubmit {
                                valueToEnter = true  // That puts this field behind and the "green" at the front
                                checkAmountIsFocused = true
                                checkAmount2IsFocused = false
                            }
                            .background(.yellow) // replace by Color(UIColor.systemBackground)
                            .zIndex(valueToEnter ? 0 : 1)
                    }
                    
                }
            }.navigationTitle("We split")
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()
                        if checkAmountIsFocused {
                            Button("Done") {
                                checkAmountIsFocused = false
                            }
                        }
                    }
                }
        }
    }
}

1

Answer 2

saysetel OP

Apr ’24

@Claude31 Interesting! Thank you very much for your solution idea.

0