TextInput should have a `Validator` function.

[u-train]

I should be able to pass a validator function to TextInput. If the validation succeeds, it will fire self.onValidChange().

Example:

Roact.createElement(StudioComponents.TextInput, {
    Text = self.state.username,
    Validator = function(possibleText)
        -- A username has to equal or be greater than 3 characters.
        return #possibleText >= 3
    end,
    OnValidChange = function(newText)
        self:setState({ username = newText })
    end
})

[u-train]

Rethinking the API:

Roact.createElement(StudioComponents.TextInput, {
    Text = self.state.username,
    Validator = function(possibleText)
        -- A username has to equal or be greater than 3 characters. We can return a reason if wanted.
        return #possibleText >= 3, "Has to be shorter than 3 characters"
    end,
    OnChanged = function(newText)
        self:setState({ username = newText })
    end,
    OnInvalidChange = function(text, reason) end, -- Now, we have the invalid text and the reason it was invalid.
})

I think it would be more common for people to use a validator of some kind. So, make the use case easier.

Now the question is how to handle OnFocusLost since that passes the current text. Should it mirror the suggested OnChanged API or only pass the last valid text in (leaning towards the latter)? Either way, it should be a non-breaking change.

Thoughts regarding all the above?

[sircfenner]

See TextInput in v1.x, which is now a controlled component