kishanraja/floatinglabeltextfieldswiftui

Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI

Hi there 👋

Hi 👋, I'm Kishan Raja

A passionate iOS developer from India

• 🔭 I’m currently working on Scanner

• 🌱 I’m currently learning blockchain and flutter

• 💬 Ask me about Swift & SwiftUI

• 📫 How to reach me [email protected]

• ⚡ Fun fact Angry Coder

Connect with me:

Languages and Tools:

 

https://kishanraja.github.io/kishanraja/index.html

floatinglabeltextfieldswiftui's Issues

cannot change font styles

Add an option to pass the return key type on keyboard

Add an option to pass the return key type on keyboard

Text color doesn't change from red after validate

When i blur out from a textfield . It show both placeholder and text at the same time

UI Test Case for FloatingLabelTextField

How can i give accessibilityIdentifier to text field, because if i add accessibilityIdentifier to FloatingLabelTextField it did not work with UI Test Case

Example:

FloatingLabelTextField($firstName, placeholder: "First Name", editingChanged: { (isChanged) in 
})
accessibilityIdentifier("firstname_textfield")

Than i code in Test Case

let firstnameTextField = app.textFields["firstname_textfield"]
        firstnameTextField.tap()
        firstnameTextField.typeText("test user")

in text field it is not typing "test user"
can you please let me know how to make working in UI Test Case?

Clicking but not setting focus (Make the label clickable).

Hi,

One problem our users have complained about is that when they click a field to set focus it does not work. We think what's happening is that they are clicking the label area instead of the text field. It would be good if that when a user clicks the label it sets focus to the text field. It would also be good if the label expanded to 100% width of the area so that you can click anywhere in the field to get it to accept focus.

Thanks,
-Mark

validtionChecker becomes TRUE only after closing the keyboard

I defined a FloatingLabelTextField (with var isValidMasterPwd2 as validtionChecker) whose content must be the same as the string inserted in another TextField. If I insert a string identical to the other in this TextField, the variable isValidMasterPwd2 becomes TRUE only after closing the keyboard.
Is there a way for the variable to immediately become TRUE as soon as the validity conditions are satisfied?

FloatingLabelTextField($masterPwd2, validtionChecker: $isValidMasterPwd2, 
placeholder: "Re-type Password", editingChanged: { (isChanged) in
                }) {
                }
                .isShowError(true)
                .addValidations([.init(condition: masterPwd1 == masterPwd2, errorMessage: "Password not equal")])
                .isRequiredField(true, with: "Password field is required")
                .isSecureTextEntry(!self.isMasterPwd2Show)
                .modifier(ThemeTextField())

How to set border?

Hi Raja,

Your library is exactly match my requirements. But only problem is I don't know how to set border for this? Can you suggest pls.

Localization for placeholder

How should i localize the placeholder to multiple language if the placeholder field isn't from LocalizedStringKey class ?

Turn off autocapitalization on the textview

Is it possible fo turn off autocapitalization or change the autocapitalizationType on the text view?

How To Remove The Bottom Line

How to remove the bottom horizontal line ?

Updating error message to below

Is there any possibility to show the error message to display below the textfield instead of replacing the placeholder text

Validation for email is always: Invalid Email

isValidEmail is always false...

Tested in SwiftUI 3

Issues with validation

Consider the following source code:

I have discovered a few issue with validation.

• When a field is required I cannot figure out how to display the error. I am using the below code however the error message just flashes briefly.

   FloatingLabelTextField($username, validtionChecker: $isValidUsername, placeholder: "Username")
      .addValidation(.init(condition: !username.isEmpty, errorMessage: "Username is required"))
      .isShowError(true)
      .errorColor(.red)
      .frame(height: 50)

• Validation does not appear to work on SecureTextEntry fields. In the below example isValidPassword is always false

FloatingLabelTextField($password, validtionChecker: $isValidPassword, placeholder: "Password")
   .addValidation(.init(condition: !password.isEmpty, errorMessage: "Password is required"))
   .isShowError(true)
   .errorColor(.red)
   .isSecureTextEntry(!self.isPasswordShow)
   .frame(height: 50)

Any assistance would be appreciated

Show error if text field is empty

I'd like to inform user if text field remains empty after button tap. For example, using placeholder color.

Unable to set Input View

how can I set input view with FloatingLabelTextField ? I wanted to display picker instead of keyboard ? but currently can't find a way to set input view.
let me know if there is a way.

add option to disable all animations

Is there a way to disable all animations for FloatingLabelTextFieldSwiftUI?

Whenever other sibling views are added/removed above it (from the viewModel's state such as validation errors), the FloatingLabelTextFieldSwiftUI gets pushed down/up on the view. This animates the title label to lag behind the rest of the UI components, creating an undesirable effect.

It would be preferable to turn off the animation in this context.

Podspecs not updated to 5.0.0

Podspecs not updated to 5.0.0

Keyboard type should not allow character and special symbols when type is Numberpad?

I am creating mobile number field and setting keyboard type as NumberPad. Then following scenario occurs:

When running with iPad keyboard we are able to enter special characters. (iPad only)
We can paste the text which is copied earlier(iPad and iPhone).
How to find out each and every character typed? callbacks not calling

I am able to do this without your library by reading this tutorial https://programmingwithswift.com/numbers-only-textfield-with-swiftui/

see image here:

I don"t have clear idea where to implement this in your class files. It would much better with those features.

Hope you got my points, Thanks for your great work.

validtion Checker

hi,
the validtion Checker variable is being changed to false when not passing the validation but not becoming true when it passes it
the error label is not showing but the binding variable still false
please advise
regards

Add text limit

Is it possible to add a limit to the amount of text entered?

Geometry Behavior

Thanks for the great package. Unfortunately due to your use of .frame(... maxHeight: .infinity ...), the view tries to grab the maximum of space, which means e.g., in a VBox, it overrides your any Spacers, etc. and aligns itself always to the bottom.

I think it would be more versatile without these settings.

When the keyboard pops out, TextFeild will be covered.

When the keyboard pops up, the TextFeild should automatically move up the corresponding distance

Problems with extracted view

Title doesn't move outside text field after editing was started if text field is inside other view.

Non compliant display of .secureTextEntry

When applying .secureTextEntry as proposed in the example:

• When setting displayPassword to false => the password doesn't even appear instead of dots
• The rightView alone has no effect and doesn't display the expected icon

Xcode 14.2, iOS 16.0

Disable editing but enable right/left view buttons

Feature request: Disable editing of the text field, while still enabling buttons added to a left/right view. For example (based on the sample code provided), I can do this:

var body: some View {
        FloatingLabelTextField($password, placeholder: "Password", editingChanged: { (isChanged) in
            
        }) {
            
        }
        .isSecureTextEntry(!self.isPasswordShow)
            .leftView({ // Add left view.
                Image("password")
            })
            .rightView({ // Add right view.
                Button(action: {
                    withAnimation {
                        self.isPasswordShow.toggle()
                    }
                    
                }) {
                    Image(self.isPasswordShow ? "eye_close" : "eye_show")
                }
            })
            .frame(height: 70)
            .padding()
    }

However, if I want the text field itself to be read-only and i set disabled(true), that also disables the Button in rightView. I'd like to be able to still toggle the visibility of the field while disabling the ability to edit.

FloatingLabelTextFieldStyle vs .isSecureTextEntry

Hi, it doesn't look possible to have both my own TextFieldStyle and .isSecureTextEntry

Thank you. Philippe.

Validation always returning false

Validation checker $isValidEmail and $isValidPassword always getting false. Am I missing something?

                   FloatingLabelTextField($txtEmail,
                                           validtionChecker: $isValidEmail,
                                           placeholder: TextFieldPlaceholder.email) { isChanged in
                        print("email text field ---- \(isChanged)")
                    }
                    .addValidation(.init(condition: txtEmail.isValid(.email),
                                         errorMessage: ErrorMessage.invalidEmail))
                    .isShowError(true)
                    .errorColor(.red)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
                    .frame(height: 70)
                    .padding(EdgeInsets(.init(top: 0, leading: 30, bottom: 0, trailing: 30)))
                    
                    //------------Password
                    FloatingLabelTextField($txtPassword,
                                           validtionChecker: $isValidPassword,
                                           placeholder: TextFieldPlaceholder.newPassword) { isChanged in
                        print("password text field ---- \(isChanged)")
                    }
                    .addValidations([.init(condition: txtPassword.isValid(.password),
                                           errorMessage: ErrorMessage.invalidPassword),
                                     .init(condition: txtPassword.count >= 5,
                                           errorMessage: ErrorMessage.minimumPasswordLength)
                    ])
                    .isSecureTextEntry(!self.isPasswordShow)
                    .rightView({
                        Button(action: {
                            self.isPasswordShow.toggle()
                        }, label: {
                            Image(systemName: self.isPasswordShow ? "eye.slash.fill" : "eye.fill")
                        })
                    })
                    .isShowError(true)
                    .errorColor(.red)
                    .keyboardType(.default)
                    .frame(height: 70)
                    .padding(EdgeInsets(top: 0, leading: 30, bottom: 0, trailing: 30))

Animate label when focused.

Hi,
Would be great to have the option to animate the label as soon as the textfield is focused, rather than when the user starts typing.

Like shown in the material components site:
https://material-ui.com/components/text-fields/

Much Appreciated.

Secure Entry not working on iOS 14.2

FloatingLabelTextField($passwordText, validtionChecker: $passwordValid, placeholder: "Password") { (bool) in
            
        } commit: {
            
        }
        .isSecureTextEntry(true)
        
        .isShowError(true) /// Sets the is show error message.
                        .errorColor(.red) /// Sets the error color.
        .floatingStyle(MeterTextFieldStyle())
        .frame(height: 51)

That is my code and it does not work properly when run on an iPhone 12 mini. This is the field that shows up:

Placeholder problem with .enablePlaceholderOnFocus

When .enablePlaceholderOnFocus set to "true" there are some UI errors at the end of focusing.

Validation issue

I was using multiple FloatingLabelTextField on clicked submit button ValidationChecker until validate first text field second text field flag state not change even second text valid.

     FloatingLabelTextField($registrationDetails.firstName,validtionChecker: $isValidFirstname, placeholder: "Voornaam *")
          .addValidations([.init(condition: registrationDetails.firstName.isValid(.name), errorMessage: "Enter Valid Firstname")
          ])
          .isShowError(true)
          .isRequiredField(true, with: "Enter Firstname")
      .floatingStyle(ThemeTextFieldStyle())
      .padding(8)
      .frame(height: 60)
      .background(RoundedRectangle(cornerRadius: 4)
            .fill(Color("textfieldBackgroundColor"))
                    .shadow(color: Color("shadowColor"), radius: 5, x: 0, y: 0))
      .padding()

      FloatingLabelTextField($registrationDetails.middleName, placeholder: "Tussenvoegsel ")
          .addValidations([.init(condition: registrationDetails.middleName.isValid(.name), errorMessage: "Enter Valid Middlename")
          ])
          .isShowError(true)
      .floatingStyle(ThemeTextFieldStyle())
      .padding(8)
      .frame(width: 300, height: 60, alignment: .leading)
      .background(RoundedRectangle(cornerRadius: 4)
            .fill(Color("textfieldBackgroundColor"))
                    .shadow(color: Color("shadowColor"), radius: 5, x: 0, y: 0))
      .padding()

      FloatingLabelTextField($registrationDetails.lastName,validtionChecker: $isValidLastname, placeholder: "Achternaam *")
          .addValidations([.init(condition: registrationDetails.lastName.isValid(.name), errorMessage: "Enter Valid Lastname")
          ])
          .isShowError(true)
          .isRequiredField(true, with: "Enter Lastname")
      .floatingStyle(ThemeTextFieldStyle())
      .padding(8)
      .frame(height: 60)
      .background(RoundedRectangle(cornerRadius: 4)
            .fill(Color("textfieldBackgroundColor"))
                    .shadow(color: Color("shadowColor"), radius: 5, x: 0, y: 0))
      .padding()

Can you please help.

Argument of '#selector' does not refer to an '@objc' method, property, or initializer

I am getting compile error as like below.

Binding<Int>

In the example, how would you make it work if the mobile number where an Integer instead of a String?

Remove/conditionally import references to UIKit to allow macOS support?

I haven't dug into the internals of the code yet, but would it be possible to add support for conditionally importing any references to UIKit? As it stands, the references to UIKit are preventing this library from being used in macOS SwiftUI applications.