downshift: validateGetRootPropsCalledCorrectly does not correctly check if the root props are applied
downshiftversion:1.14.0nodeversion:npm(oryarn) version:
Reproduction repository: https://codesandbox.io/s/23yzon246r
Problem description:
I would like to use a non-DOM component as root component returned by the children function. I pass to it a prop rootProps containing the result of getRootProps() and it spreads the object to the inner root div. In such a way, the root props that Downshift needs are correctly applied. However the validateGetRootPropsCalledCorrectly throws an error.
Suggested solution:
I would suggest to either remove the check or to add a prop excludeSafetyChecks that allows to bypass such a check.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 15 (5 by maintainers)
Commits related to this issue
- Add the option `suppressRefError` to `getRootProps`. Fixes paypal/downshift#235. — committed to yp/downshift by yp 7 years ago
- feat: add the option `suppressRefError` to `getRootProps`. (#241) * Add the option `suppressRefError` to `getRootProps`. Fixes paypal/downshift#235. * Add myself as contributor. * Fix Markdo... — committed to downshift-js/downshift by yp 7 years ago
- feat: add the option `suppressRefError` to `getRootProps`. (#241) * Add the option `suppressRefError` to `getRootProps`. Fixes paypal/downshift#235. * Add myself as contributor. * Fix Markdo... — committed to Rendez/downshift by yp 7 years ago
Reopening since this conversation is taking a different direction.
Ah, I see what you mean. Very interesting. Hmmm… I’m trying to think of a good way to keep the error but also allow you to do what you’re doing there because I think that it’s more likely people are making a mistake when you don’t pass a
refKeyand spreading on a composite component.What I’m thinking is that we could add an option you could pass to
getRootPropsthat is:silenceRefError: trueor something like that. Then we’d update the error message to tell people they can use that if they know what they’re doing. What do you think?The main point here is that the
getRootPropscall return an object that is not spread onto the composite component but passed as-is to the root composite component which, internally, it spreads onto the rootdiv. Since therefis only a key of an object prop (and not a prop itself), react does not intercept it and it can pass to the “real” root DOM element.