Add focusDefaultOption prop to prevent focusing first option

[bladey]

Based off PR #3705

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: ee35360d72c921c533da97a081b262bc4de86bee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ee35360d72c921c533da97a081b262bc4de86bee:

Sandbox	Source
react-codesandboxer-example	Configuration

[bladey]

@JedWatson looks good to me, for your review.

[bladey]

Based off PR #3705

[eugenet8k]

This is a very anticipated PR for our project. We had to add a bunch of dirty hacks (accessing internal state) to override default focus option that ReactSelect sets after each options update.

[rockymountainhigh1943]

Looking forward to this fix getting through! Any chance this is getting close?

[bladey]

@rockymountainhigh1943 as soon as possible, I'm doing my best to get a release together.

[rockymountainhigh1943]

@rockymountainhigh1943 as soon as possible, I'm doing my best to get a release together.

👏 👏 👏 Thank you!

[danielstecki]

Are you still planning on releasing this?

[zbuttram]

If anyone else is looking for a temporary fix until this is landed in a release, you can monkeypatch <Select>'s internals via its ref prop. Something like the hook below works if you pass the returned ref to your <Select> component's ref prop:

function useReactSelectFocusFix() {
  const selectRef = useRef()
  useEffect(() => {
    if (selectRef.current && selectRef.current.select) {
      selectRef.current.select.getNextFocusedOption = () => null
    }
  }, [selectRef.current])
  return selectRef
}

[b3rg3t]

@zbuttram can you add a codesandbox on how to solve it? doesn't get it to work.

[luknl]

This will be a great addition to our project, can't wait for this to be merged!

[ayrtongomes]

@JedWatson approve this pls 🙏🙏

[arunpresdo]

Any update on when this will be merged?

[luknl]

Hello @JedWatson, do you approximately know when this will be merged? We can't wait for this 🙏

[Methuselah96]

~~I've started a fork of react-select. Feel free to resubmit this PR on the fork and we can get it merged and released.~~

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[675r]

Can this be merged please

[herbertpimentel]

Does anybody has a workaround to that ? I also could not make @zbuttram suggestion get to work.

[gunn]

Hi @herbertpimentel, I'm currently using this as a workaround:

React.memo(props=> {
  const selectRef = React.useRef(null)

  React.useEffect(() => {
    let select = selectRef.current?.select?.select
    select ??= selectRef.current?.select // <-- for multi input

    if (select) {
      const original = select.getNextFocusedOption.bind(select)

      select.getNextFocusedOption = options => {
        const inputValue = selectRef.current?.state?.inputValue
        if (inputValue) return original(options)
      }
    }
  }, [selectRef.current])

  return (
    <ReactSelect
      ref={selectRef}
      { ...props }
    />
  )
})

[uragecz]

Can be this MR finally merged ? (can someone resolve conflicts?) i would really appreaciate this feature..

[JavierPDev]

Any ETA on when this will be merged? This has been around for almost two years now and almost a year ago it was said that this would be fixed soon.

I see that most of the workarounds involve hooks and functional components. If anyone else is using class-based components and wants to hack this issue away while waiting for this merge here's what worked for me:

  componentDidMount() {
    if (this.selectRef) {
      this.selectRef.select.select.select.getNextFocusedOption = () => null;
    }
  }

  render() {
    return (
      <AsyncCreatableSelect
        ref={ref => this.selectRef = ref}
        // Rest of your props here...
      />
    );
  }

All those .selects must be from me using the async creatable component rather than the base select component. You'll have to console.log the ref and check for the existence of getNextFocusedOption in the prototype of each .select to see how far down you need to nest depending on which select component you use.

[Eli-Black-Work]

Just FYI:

As far I can tell, the newest version of react-select (4.3.0, or maybe earlier) no longer exposes getNextFocusedOption(), so the posted workarounds no longer work.

[Eli-Black-Work]

@bladey, I noticed that you have permissions in this repository to close issues. Do you also have permissions to merge pull requests?

[grzennio]

Will this be ever merged? it's like one and half year now.

[theocerutti]

Maybe someone found a workaround ?

[Eli-Black-Work]

I think they're not merging any PR's until v5 is out: https://github.com/JedWatson/react-select/issues/4559#issuecomment-860808329

[Annie-Huang]

Not sure why this is not merged yet. But does anyone got a walk around solution for version @4.3.1, which is the latest version now (Sep 9th, 2021). The getNextFocusedOption doesn't seem to be exposed for this version.

Or please let me know which version I can use to use for the getNextFocusedOption work around solution?

Many thanks...

[grzennio]

Not sure why this is not merged yet. But does anyone got a walk around solution for version @4.3.1, which is the latest version now (Sep 9th, 2021). The getNextFocusedOption doesn't seem to be exposed for this version.

Or please let me know which version I can use to use for the getNextFocusedOption work around solution?

Many thanks...

After many tries, we just decided that this is not an issue. Our selectors started just using search functionality. And the only issue we found, is that if:

• 2 values available in selector, it will hide current selected ( so the list will contain only one - the current selected is not shown ) which is not that bad
• 1 values available in selector, it should basically can't event be changed to another For 3 and more values available in selector, it will hide current selected ( so the list will contain many items except current selected which looks good. After click on select, you can just type to filter out options and it works like google autocomplete (kind-off) which is still nice UX

I know it's still not what we want by this PR but sometimes it's easier to re-think solutions.

Looking for you opinion :)

[Annie-Huang]

Not sure why this is not merged yet. But does anyone got a walk around solution for version @4.3.1, which is the latest version now (Sep 9th, 2021). The getNextFocusedOption doesn't seem to be exposed for this version. Or please let me know which version I can use to use for the getNextFocusedOption work around solution? Many thanks...

After many tries, we just decided that this is not an issue. Our selectors started just using search functionality. And the only issue we found, is that if:

• 2 values available in selector, it will hide current selected ( so the list will contain only one - the current selected is not shown ) which is not that bad
• 1 values available in selector, it should basically can't event be changed to another For 3 and more values available in selector, it will hide current selected ( so the list will contain many items except current selected which looks good. After click on select, you can just type to filter out options and it works like google autocomplete (kind-off) which is still nice UX

I know it's still not what we want by this PR but sometimes it's easier to re-think solutions.

Looking for you opinion :)

I am not sure I followed, @grzennio, when you said After many tries, we just decided that this is not an issue. Are you talking about your company trying to resolve the similar issue or you are speaking on behalf of the reac-select team?

Because I can see this is a very common request from the community. Google also not auto high-line on the first item that match the search term until user press down arrow key (see screen recording)

https://user-images.githubusercontent.com/26481566/132780074-dfaede11-e8b9-4d9f-bdd7-4b19418b5430.mov

All I want is when i use AsyncSelect here and when I type a, don't auto focus on the Ocean option until i press the down key.

https://user-images.githubusercontent.com/26481566/132780339-1192f015-da22-4e2a-9acd-379512cddb44.mov

[raulhinojosa]

is this going to be merged?