Automatic Caps Lock Activation Issue in MaskedTextField

[mkardas98]

Prerequisites

• [X] Put an X between the brackets on this line if you have done all of the following:
  • read our Wiki;
  • read the entire Known issues section;
  • checked that my issue isn't already filled;
  • searched StackOverflow's input-mask tag for similar problems.

Describe the bug

When attempting to input text into the MaskedTextField component, the keyboard's Caps Lock is automatically enabled and remains enabled throughout the text entry process. Even after entering a letter, the Caps Lock remains on. However, if a single letter is entered, the Done button on the keyboard is pressed, and the field is re-entered for editing, the default lowercase letters are restored. Setting .autocapitalization(.none) does not rectify this issue. Additionally, you can manually disable Caps Lock, enter a single letter, and Caps Lock will be automatically re-enabled.

Steps to reproduce the behaviour:

1. Navigate to the view containing the MaskedTextField.
2. Tap on the MaskedTextField to begin text input.
3. Observe that the Caps Lock on the keyboard is automatically enabled and remains on during text entry.
4. Enter a single letter, press Done on the keyboard, then re-enter the field for editing.
5. Observe that the default lowercase letters are now restored.

Expected behaviour The keyboard should not automatically enable Caps Lock when entering text into the MaskedTextField. The .autocapitalization(.none) modifier should function as expected, ensuring that letters are not automatically capitalized.

Actual behaviour The Caps Lock is automatically enabled during text entry in the MaskedTextField and remains enabled throughout, despite using the .autocapitalization(.none) modifier.

Platform information

• OS version: iOS 17
• Library version: 7.3.2
• Language: Swift 5.9
• Device: iPad Pro (12.9-inch) (6th generation)

Additional context Below is the code snippet demonstrating the MaskedTextField implementation:

import Foundation
import SwiftUI
import FormValidator
import InputMask

struct MaskedTextInputView: View {
    @ObserveInjection var inject

    @Binding var value: String
    @Binding var text: String
    var validator: ValidationContainer
    var label: String = ""
    var placeholder: String = ""
    let mask: String

    var keyboardType: UIKeyboardType = .default
    var autocapitalization: UITextAutocapitalizationType = .none
    var isRequired: Bool = false
    @Binding var isDisabled: Bool
    @State var complete: Bool = false

    var body: some View {
        VStack {
            HStack(spacing: 0) {
                Text("\(label.localized)\(isRequired ? "*" : "")")
                    .SFProBody
                    .frame(width: 160, alignment: .leading)
                    .lineLimit(1)
                    .truncationMode(.tail)
                    .foregroundColor(!isDisabled ? .black : .customLabelsGrey60)

                InputMask.MaskedTextField(
                    text: $text,
                    value: $value,
                    complete: $complete,
                    placeholder: placeholder.localized,
                    primaryMaskFormat: convertMask(mask.replacingOccurrences(of: "*", with: "_")),
                    autocomplete: false,
                    autocompleteOnFocus: false,
                    allowSuggestions: false
                )
                .returnKeyType(.done)
                .onSubmit { textField in
                    textField.resignFirstResponder()
                }
                .keyboardType(keyboardType)
                .autocapitalization(autocapitalization)
                .foregroundColor(!isDisabled ? .black : .customLabelsGrey60)
                .disableAutocorrection(true)
                .frame(maxWidth: .infinity, alignment: .leading)
                .frame(width: 268)
                .padding(.trailing, 16)
                .disabled(isDisabled)
            }
            .frame(maxWidth: .infinity)
            .validation(validator) { message in
                Text("\(message)".localized)
                    .foregroundColor(.red)
                    .SFProError
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(0)
            }

        }
        .padding(.vertical, 11)
        .frame(maxWidth: .infinity)
        .enableInjection()
    }
}

[taflanidi]

Fantastic report, @mkardas98, thank you so much!

I'll look into this and get back to you during weekend.

[mkardas98]

Hello @taflanidi. I hope you had a good weekend. Were you able to figure out anything about the issue described above?

[taflanidi]

Hi @mkardas98 Tough week 🙈 I'll come back to you asap

[mkardas98]

Hi @taflanidi, perhaps you have already managed to check this problem? I found another problem. When it uses the mask "[9999AA]" also 2 the keyboard automatically switches to uppercase.

[PeterssonMK]

Hello ! Any progress on this issue ?

[PeterssonMK]

A hack solution in UIKit that worked for me is setting someUITextView.autocapitalizationType = .none

[mkardas98]

InputMask.MaskedTextField(
   ...args
)
.autocapitalizationType(UITextAutocapitalizationType.none)

[IvanIhnatsiuk]

I am not sure about this solution because previously everything worked without this 🙂

@taflanidi could you please take a look when you have some free time?