profile
viewpoint

Ask questionsSupport RefObjects for sub-components

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • downshift version: 3.2.10
  • node version: 10.9.0
  • npm (or yarn) version: 6.2.0

Relevant code or config

const Select = () => {
  const menuRef = useRef(null);

  return (
    <Downshift>
      {({ getMenuProps, getInputProps }) => (
        <div>
          <input {...getInputProps()} />
          <div {...getMenuProps({ ref: menuRef })}>...options</div>
        </div>
      )}
    </Downshift>
  );
};

What you did:

I passed an object-style ref to getMenuProps

What happened:

I got an error:

downshift.esm.js:236 Uncaught TypeError: fn.apply is not a function
    at downshift.esm.js:236
    at Array.forEach (<anonymous>)
    at downshift.esm.js:234
    ...

<!-- Please provide the full error message/screenshots/anything -->

Reproduction repository:

<!-- If possible, please create a repository that reproduces the issue with the minimal amount of code possible. -->

Problem description: Downshift tries to compose external refs, but it assumes all refs are functions.

Suggested solution: Augment ref composition to account for object-style refs. You can wrap Downshift's function ref in another function which calls it, then also sets externalRef.current = element (if external ref is an object) or calls external ref (if it's a function).

I'll create a PR soonish, if time allows. Otherwise this issue should help remind me that I need to.

downshift-js/downshift

Answer questions a-type

@victormovchan TS allows you to mutate current if you type it with | null:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L932

useful!

Related questions

TypeScript compiler error with ref passed from getInputProps to component using a forwardRef hot 2
Double rendering (Lifecycle hook scheduled a cascading update) after item selection hot 1
TypeScript: definitions missing `preventDownshiftDefault` hot 1
Errors "You returned a non-DOM element. You must specify a refKey in getRootProps" hot 1
Apollo with debounce example - downshift hot 1
Switching between controlled and uncontrolled input hot 1
source:https://uonfu.com/
Github User Rank List