[useAutocomplete] Add option to disable selecting text on first focus

[Bebersohl]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The text of the input is selected on first focus of input. Add a new prop to useAutocomplete to opt out of this behavior

Examples 🌈

add selectTextOnFirstFocus prop that defaults to true

const handleClick = () => {
    if (
      firstFocus.current &&
      inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
    ) {
      inputRef.current.focus();
      selectTextOnFirstFocus && inputRef.current.select();
    }

    firstFocus.current = false;
  };

Motivation 🔦

To make useAutocomplete more flexible.

[oliviertassinari]

What's the motivation for this behavior?

[Bebersohl]

So that you can use useAutoComplete without the input text being selected in the initial focus.

Here is a work around for anyone else that wants to opt out of the select behavior:

  const {
    ref,
    ...inputProps
  } = getInputProps() as any;

  // prevent text being selected on first input focus
  if (ref && ref.current) {
    ref.current.select = () => undefined;
  }

  return (
      <div {...getRootProps()}>
        <input
          ref={ref}
          {...inputProps}
        />
    </div>

[oliviertassinari]

I had a closer look at the issue. I think that you are raising an interesting concern. Say that you want to implement a search bar with suggestions (I have this very use case). Then, you will benchmark that not selecting thei input text on first focus is a common approach. For instance, Google search won't select while Chrome URL box will.

[oliviertassinari]

@Bebersohl What do you think of a new selectOnFocus prop, null by default (so people can force a value) and with a fallback?

selectOnFocus = !freeSolo;

[Bebersohl]

@oliviertassinari Sounds good to me.

[oliviertassinari]

Great, do you want to submit a pull request? :)

[Bebersohl]

Sure