How to only allow and format certain characters for TextField input.

[joshuakcockrell]

This pattern comes up a lot in my app with user input:

• User is shown a TextField
• Don't allow users to type anything other than 0123456789
• Don't allow users to copy paste dumb text like Robert'); DROP TABLE Students;-- (Yes, I also have backend string sanitization)

What I've tried:

CharacterSet

Set

(it gets turned into this Kotlin)

Set(Array(".."))

Also, while we're here.. textContentType(..) allows iOS to auto suggest input for the user (like if they got texted a one-time code it would auto fill, or it could suggest their address, etc.) so that would be nice to support.

Thanks!

[joshuakcockrell]

This looks like the Kotlin I want

val validChars = "0123456789".toSet()
val onlyValid = input { validChars.contains(it) }

I can report the following works great:

[joshuakcockrell]

Unfortunately, I'm not sure how to actually use the filter code I've written in Kotlin because it looks like Just doesn't work in Skip.

I really don't care if Skip supports Just or not (this is the only place in my entire app I use Just).

I just want one way to solve this problem of users typing and copy pasting dumb strings.

[joshuakcockrell]

I even tried this approach (no Just required), which works in iOS, but not in Kotlin for some reason.

[joshuakcockrell]

I'm just going through answers from this SO post, trying to see what will work with Skip

This one looks like it would work

TextField("Placeholder", value: $text, format: .number)

But it doesn't actually stop bad input on iOS.

[joshuakcockrell]

I feel like this attempt was promising. But it doesn't allow any input on Android, and the iOS version doesn't stop any bad characters

[aabewhite]

Thanks for your patience! I'm going to look into this. In particular I'm not sure why the .onChange(...) thing isn't working.

In general, though, when you find some pretty simple Swift API that Skip doesn't support (like Set(_: String)), you might really consider adding support yourself through our open source libraries. It often isn't hard. The contributing section of the docs talks about how to get set up to contribute to the libraries:
https://skip.tools/docs/contributing/

[aabewhite]

I have this working so that you'll be able to do the onChange thing:

let allowedStrings = Set("...")

TextField(...).onChange(of: text) { _ in text = text.filter { allowedStrings.contains(text) } }

I'll let you know when the new releases are tagged so you can update your packages!

[aabewhite]

The releases have been tagged. If you File->Packages->Update to Latest, things should work as expected

[joshuakcockrell]

The release is working great! Thanks for the help.

Just for future reference if anyone sees this in the future, here's the final version that works on both iOS & Android.

func onlyDigits(_ input: String) -> String {
  #if SKIP
    let validChars = "0123456789".toSet() // Remove once Skip supports Set
  #else
    let validChars = Set("0123456789")
  #endif
  
  let out = input.filter{ validChars.contains($0) }
  print("in: \(input) out: \(out)")
  return out
}

public var body: some View {
  #if !SKIP
  // For some reason this is a bit glitchy on Android
    TextField("Placeholder", text: $text)
      .onChange(of: text) {_ in
        text = onlyDigits(text)
      }
  #else
    // For some reason this doesn't work on iOS
    TextField("Placeholder", text: .init(get: {
      return onlyDigits(text)
    }, set: { newValue in
      text = onlyDigits(newValue)
    }))
  #endif
}

[aabewhite]

Note that Set(String) should also work now