Right now, autoFocus
applies to the beginning of the input but I'd like to get focused on the end of the text.
export default function BasicTextFields() {
const [value, setValue] = React.useState(
"hello world. hello world. hello world"
);
return (
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" }
}}
noValidate
autoComplete="off"
>
<TextField
id="outlined-basic"
variant="outlined"
value={value}
onChange={(e) => setValue(e.target.value)}
multiline
autoFocus
/>
</Box>
);
}
Is this possible?
I tried this from this link : https://github.com/mui/material-ui/issues/12779 But this didn't work for my case.
<TextField
variant="outlined"
type="text"
id="field-comment"
name="comment"
label="Label"
placeholder="Placeholder"
onChange={(event) => setValue(event.target.value)}
inputRef={(input) => input && input.focus()}
onFocus={(e) =>
e.currentTarget.setSelectionRange(
e.currentTarget.value.length,
e.currentTarget.value.length
)}
multiline
rows={4}
value={value}
className={classes.sCommentTextField}
/>
I also tried this.
<TextField
inputRef={input => input && input.focus()}
/>
but it also didn't work.
Are there any ways that I can do this?
This works!
<TextField
variant="outlined"
type="text"
id="field-comment"
name="comment"
label="Label"
placeholder="Placeholder"
onChange={(event) => setValue(event.target.value)}
inputRef={(input) => input && input.focus()}
onFocus={(e) =>
e.currentTarget.setSelectionRange(
e.currentTarget.value.length,
e.currentTarget.value.length
)}
multiline
rows={4}
value={value}
className={classes.sCommentTextField}
/>
Remove autoFocus
and add inputRef
and onFocus