How to avoid first letter to be capitalized on input field

Question

I'm working on a react web application mostly used from mobile.
We got an input field and we would like to AVOID the first letter to be capitalized.

The field can contain capitalized letter, but the first one should be lowercase for sure.

E.G.

www.mylink.com/R44iaYYIla

what it's currently happening is that we get the following:

Www.mylink.com/R44iaYYIla

It's not about what we store, we don't have problem on manipulating the string. It's about the UX, so that when the user writes www it doesn't start with a capital W

here's the component

import React from "react";
import { Form } from "antd";
import TextField from "@material-ui/core/TextField";

export default function MyForm() {

const [form] = Form.useForm();

return (
    <>
        <Form form={form} name="my-form">
            <Form.Item name="my-field" rules={rules.url} validateFirst={true}>
                <TextField
                    label="my-field-label"
                    autoFocus
                    type="text"
                />
            </Form.Item>
        </Form>
    </>
);

}

Any idea?

Answer 1

Material UI TextField has an autoCapitalize field to handle this.

Try:

import React from "react";
import { Form } from "antd";
import TextField from "@material-ui/core/TextField";

export default function MyForm() {

const [form] = Form.useForm();

return (
    <>
        <Form form={form} name="my-form">
            <Form.Item name="my-field" rules={rules.url} validateFirst={true}>
                <TextField
                    autoCapitalize='none'
                    label="my-field-label"
                    autoFocus
                    type="text"
                />
            </Form.Item>
        </Form>
    </>
);