-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[material-ui] Textfield add autoSelect prop #42551
Comments
I'm also open to work arounds if there are any. I tried a handful of things with no success. |
@TonyBrobston, I didn't understand your issue. Can you provide reproduction steps using an example from the Autocomplete docs or a live example on CodeSandbox or StackBlitz? What is the "current behavior" vs. the "expected behavior"? The Autocomplete component already has an API docs: https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-autoSelect. Does that work for you? |
Hey @ZeeshanTamboli Here is a super rough example: https://codesandbox.io/p/sandbox/icy-violet-j2nf2f?file=%2Fsrc%2FDemo.tsx%3A36%2C19 When you click "Edit" for the Date, when the DatePicker is rendered, the value in the field is focused and selected. When you click "Edit" for the TextField, when the TextField is rendered, the TextField is focused, but the value is not selected. The desire is to have the TextField have an option to function the same way, to also select the text as the user is going to overwrite the value. Does this help? |
We don't need to introduce a new prop. You can do the following using <TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
value={name}
autoFocus
onFocus={(event) => {
event.target.select();
}}
/>; CodeSandbox: https://codesandbox.io/p/sandbox/beautiful-gould-j6xzk3 |
@ZeeshanTamboli Thanks for the suggestion, this seems to be on the right track. I went to implement this inside my Autocomplete and it seems there is a race condition. If I add a 50 ms delay before Any idea what to do in that case? Here is the issue replicated with the 50 ms delay commented out, if you test commented out and commented in, you'll see what I mean. https://codesandbox.io/p/sandbox/spring-river-ks6z6y?file=%2Fsrc%2FDemo.tsx |
@TonyBrobston I don't see any race condition: issue-42551.mp4 |
@ZeeshanTamboli Weird... maybe it is browser specific. Are you in Chrome in that video? |
Yes. |
Summary
We have a need where an Autocomplete is being rendered and we want the underlying TextField's value to be auto focused and auto selected (highlighted and ready to be changed) on render.
Examples
No response
Motivation
The Date Picker and Time Picker do this during render when using the
autoFocus
prop. However I can see a pretty big difference between a regularTextField
and a picker field. So I don't necessarily see this as defaultautoFocus
behavior on theTextField
component; I'm wondering if this should be a different prop likeautoSelect
orautoHighlight
or something of that nature?Search keywords: Textfield autofocus autoselect
The text was updated successfully, but these errors were encountered: