I work with linguistics software, and it's important for me to be able to normalize (usually with NFC or NFD) all text inputs from a user session. Is there a simple way to force all Material UI <TextField> components to automatically normalize the input text?
Add a comment
|
1 Answer
Here's a wrapper component I came up with, but I'd be interested to see other solutions:
import { TextField, TextFieldProps } from "@mui/material";
import { ReactElement } from "react";
export type NormalizedTextFieldProps = TextFieldProps & {
form?: "NFC" | "NFD" | "NFKC" | "NFKD";
};
export function NormalizedTextField(props: NormalizedTextFieldProps): ReactElement {
const { form, ...textFieldProps } = props;
return (
<TextField
{...textFieldProps}
onChange={(e) => {
if (textFieldProps.onChange) {
textFieldProps.onChange({
...e,
target: {
...e.target,
value: e.target.value.normalize(form || "NFC"),
},
});
}
}}
/>
);
}
Note: This doesn't work with TextField prop type = "email" because the input is silently converted from Unicode to punycode on some web browsers, which seems to happen before onChange is called.