Input Mask Incorrect for Area Codes Starting with 3 about phonenumberkit

[bguidolim]

I'll investigate it as well.

[Appswage]

Interesting you could repro with Germany set. I had no issues with Germany set. I think if the shouldChangeCharactersInRange was the issue it would not only happen with numbers starting with 3. I wonder if there is some post processing going on in the SDK related to 3 (possibly due to some country code item?) that resolves the issue for the later delegate textFieldDidChange but not the earlier shouldChangeCharactersInRange. Otherwise odd given how specific this is.

Thank you for the help and your work! Danke.

[bguidolim]

Can you check what is the default region when you first try to format the number without the country code?

[Appswage]

Hi - The default region is US. I have the flag icon turned on, so before even beginning it shows the US flag. I did find something interesting though when examining the textField in the below delegate:

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool

Printing out the textField to the console as each letter is typed:

When one types in "2" and then "1" it will show a blank and then 2. However, when one types a "3" and then a "1", it also starts blank but then shows a "(3". Checking all other numbers through 9 shows the proper blank and then the number. So only starting with "3" shows "(3" after the second digit is entered.

[hypermobileshop99]

@bguidolim Any updates on this issue? Can you please let me know when you think this issue will be resolved? I tried with v3.5.8, v3.5.10 and v3.6.0 but the issue seems to be not resolved yet.

[bguidolim]

I'm not able to reproduce this issue.
On version 3.6.1, there is a fix related to the PartialFormatter, used for the PhoneNumberTextField. Could you please take a look at this version?

[Appswage]

I can confirm that the issue is still present in 3.6.1. However, I found that if I changed the phone's Region (via the iPhone's setting's Language & Region) to say Germany, then it worked fine. So the issue is present when setting region to United States. Of course other countries may also have that issue but clearly some, like Germany, do not.

[bguidolim]

@Appswage is it reproducible on the simulator or only on a physical device? Which iOS version are you seeing this?
Unfortunately, I'm still not able to reproduce this issue. Tried on simulator (16.4) and physical device (16.5)

[Appswage]

@bguidolim - I am seeing it on real devices running iOS 16.5. For clarity, this is with the PhoneNumberTextField and as digits are entered into that field you can also observe this in the delegate I mentioned above. Below is the implementing code. As I am using it in SwiftUI it is wrapped in a representable:

struct PhoneField: UIViewRepresentable {
    @Binding var phoneNumber:String
    
    func makeUIView(context: Context) -> PhoneNumberTextField {
        let phoneKit = PhoneNumberKit()
        let phoneView = PhoneNumberTextField(withPhoneNumberKit: phoneKit)
        phoneView.delegate = context.coordinator
        phoneView.withFlag = true
        return phoneView
    }
    
    func updateUIView(_ uiView: PhoneNumberTextField, context: Context) {
        uiView.text = phoneNumber
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        var parent:PhoneField
        
        init(_ parent: PhoneField) {
            self.parent = parent
        }
        
        func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
            //print(textField.text) <--- to observe the issue. Typing 31 will show "(3" while 21 will show "2"

           // code below to get around this issue temporarily. 
            let currentText = textField.text ?? ""
            var updatedText = (currentText as NSString).replacingCharacters(in: range, with: string)
            updatedText.removeAll(where: {$0 == "("})
         // 
            parent.phoneNumber = updatedText
            return true
        }
        
        func textFieldDidEndEditing(_ textField: UITextField) {
            parent.phoneNumber = textField.text ?? ""
        }
    }
}

[bguidolim]

I hope it doesn't get embarrassing, but I'm still unable to reproduce the issue.
I've used the code above, with and without the delegate. I've set the region and language. None of these made me reproduce the issue.

I kindly ask you to provide a small running project with the issue, preferably reproducible using the simulator, with the following information:

• Xcode version
• iOS version
• Exact steps to reproduce

[Appswage]

Xcode 14.3.1 (14E300c)
iOS 16.5 (actual devices) / 16.4 simulator / SwiftUI canvas (you can see the issue directly on the canvas as well)
PhoneNumberKit 3.6.1 (happened with an earlier version as well)

Type a number starting with 3. For example, the number 310-555-1212 will show in the PhoneNumberTextField as "(3105551212". If you type 210-555-1212 it will show in the PhoneNumberTextField as "[phone]" which is the expected result. Looking at the print statement as I indicated earlier will show the added "(" for numbers starting with 3. Fine for all other numbers. Also will work fine if you manually type [phone]. Issue occurs when using region United States in the phone's settings. Works fine if region is set to "Germany". Didn't check other regions.

Repro code is below:

import SwiftUI
import PhoneNumberKit

struct ContentView: View {
    @State private var phoneNumber = ""
    
    var body: some View {
        VStack {
            PhoneField(phoneNumber: $phoneNumber)
        }
        .padding()
    }
}

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

struct PhoneField: UIViewRepresentable {
    @Binding var phoneNumber:String
    
    func makeUIView(context: Context) -> PhoneNumberTextField {
        let phoneKit = PhoneNumberKit()
        let phoneView = PhoneNumberTextField(withPhoneNumberKit: phoneKit)
        phoneView.delegate = context.coordinator
        phoneView.withFlag = true
        return phoneView
    }
    
    func updateUIView(_ uiView: PhoneNumberTextField, context: Context) {
        uiView.text = phoneNumber
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        var parent:PhoneField
        
        init(_ parent: PhoneField) {
            self.parent = parent
        }
        
        func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
            let currentText = textField.text ?? ""
            print(currentText)
            parent.phoneNumber = (currentText as NSString).replacingCharacters(in: range, with: string)
            return true
        }
        
        func textFieldDidEndEditing(_ textField: UITextField) {
            parent.phoneNumber = textField.text ?? ""
        }
    }
}

[bguidolim]

@Appswage with the code provided, I can see the issue now. However, it's not an issue of PNK but a problem with implementing the SwiftUI wrapper. Here is a working example:

struct PhoneField: UIViewRepresentable {
    @Binding var phoneNumber: String

    func makeUIView(context: Context) -> PhoneNumberTextField {
        let phoneView = PhoneNumberTextField()
        phoneView.delegate = context.coordinator
        phoneView.withFlag = true
        phoneView.addTarget(context.coordinator, action: #selector(Coordinator.textFieldDidChange), for: .editingChanged)
        
        return phoneView
    }

    func updateUIView(_ uiView: PhoneNumberTextField, context _: Context) {
        uiView.text = phoneNumber
    }

    func makeCoordinator() -> Coordinator {
        Coordinator($phoneNumber)
    }

    class Coordinator: NSObject, UITextFieldDelegate {
        var phoneNumber: Binding<String>

        init(_ phoneNumber: Binding<String>) {
            self.phoneNumber = phoneNumber
        }

        @objc func textFieldDidChange(_ textField: UITextField) {
            phoneNumber.wrappedValue = textField.text ?? ""
        }
    }
}

[Appswage]

@bguidolim - This is interesting. I played with your changes and found the only one's needed for this, versus my original code are:

phoneView.addTarget(context.coordinator, action: #selector(Coordinator.textFieldDidChange), for: .editingChanged)

@objc func textFieldDidChange(_ textField: UITextField) {
   parent.phoneNumber = textField.text ?? ""
}

So this issue comes down to the usage of textFieldDidChange

It's perplexing because it originally worked for every number other than 3 and it worked for everything when using the German locale versus the United States. There is obviously nothing in the above wrapper code dealing with either situation. I would have expected, for these changes, that the issue would be present with all phone numbers and not just a 3 and the US locale. Do you have a sense, from the underlying code, why only these very specific situations (3 and US) caused this?

Thanks.

[bguidolim]

I didn't investigate further, but my region is set to Germany, and I was able to reproduce the issue.

The thing is, with the SwiftUI wrapper, you have a cyclical set using shouldChangeCharactersInRange:, which does not match the SwiftUI View lifecycle. So it's definitely not a good place to set a binding property.

[hypermobileshop99]

@bguidolim Is this solved? My project is in Swift, and I still see the issue.

[bguidolim]

@hypermobileshop99 it's not an issue with PNK.