[material-ui] Textfield add autoSelect prop

[TonyBrobston]

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 regular TextField and a picker field. So I don't necessarily see this as default autoFocus behavior on the TextField component; I'm wondering if this should be a different prop like autoSelect or autoHighlight or something of that nature?

Search keywords: Textfield autofocus autoselect

[TonyBrobston]

I'm also open to work arounds if there are any. I tried a handful of things with no success.

[ZeeshanTamboli]

@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 autoSelect prop. Check it out in this playground: https://mui.com/material-ui/react-autocomplete/#playground.

API docs: https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-autoSelect.

Does that work for you?

[TonyBrobston]

@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 autoSelect prop. Check it out in this playground: https://mui.com/material-ui/react-autocomplete/#playground.

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?

[ZeeshanTamboli]

We don't need to introduce a new prop. You can do the following using event.target.select() on focus. See :

<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