nkbt / react-debounce-input

React component that renders Input with debounced onChange
MIT License
450 stars 61 forks source link

Issue Setting ref for Autofocus #112

Closed JimLynchCodes closed 5 years ago

JimLynchCodes commented 5 years ago

Hi friends!

First, let me say thanks for making this nice component! It worked pretty smoothly right out of the box like this:

  <DebounceInput
      ref={input => input && input.focus()}
      minLength={3}
      debounceTimeout={400}
      onChange={e => this.onSearch(e)} />

Before I installed DebounceInput I was using a regular tag. I was adding this "ref" line in order to make it autofocus when it becomes visible on the page (triggered by a different button on the page)

<input
    ref={input => input && input.focus()}
    type="text"
    onChange={e => this.onSearch(e)}/>

In the README docs there is says that "Arbitrary props will be transferred to rendered ", but when I try to put this like on the DebounceInput it breaks:

<DebounceInput
          ref={input => input && input.focus()}
          minLength={3}
          debounceTimeout={400}
          onChange={e => this.onSearch(e)} />

with this error:

menu.js:120 Uncaught TypeError: input.focus is not a function
    at ref (menu.js:120)
    at commitAttachRef (react-dom.development.js:17449)
    at commitAllLifeCycles (react-dom.development.js:18695)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18902)
    at react-dom.development.js:20372
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:20371)
ref @ menu.js:120
commitAttachRef @ react-dom.development.js:17449
commitAllLifeCycles @ react-dom.development.js:18695
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18902
(anonymous) @ react-dom.development.js:20372
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20371
performWorkOnRoot @ react-dom.development.js:20300
performWork @ react-dom.development.js:20208
performSyncWork @ react-dom.development.js:20182
requestWork @ react-dom.development.js:20051
scheduleWork @ react-dom.development.js:19865
scheduleRootUpdate @ react-dom.development.js:20526
updateContainerAtExpirationTime @ react-dom.development.js:20554
updateContainer @ react-dom.development.js:20611
ReactRoot.render @ react-dom.development.js:20907
(anonymous) @ react-dom.development.js:21044
unbatchedUpdates @ react-dom.development.js:20413
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21040
render @ react-dom.development.js:21109
(anonymous) @ main.js:45
__webpack_require__ @ bootstrap 285405bbe61ba8d0401d:19
(anonymous) @ bootstrap 285405bbe61ba8d0401d:62
(anonymous) @ bootstrap 285405bbe61ba8d0401d:62
react-dom.development.js:17071 The above error occurred in the <DebounceInput> component:
    in DebounceInput (created by Menu)
    in div (created by Menu)
    in header (created by Menu)
    in Menu (created by App)
    in div (created by App)
    in App

So, I guess my question are:

  1. is ref not an "Arbitrary" prop and not passed down?
  2. do I need to drill down differently in order to set focus,
  3. what is recommended way to do this "autofocus" feature (if there is not one right not consider thinking about it and adding to the docs 😁)?
JimLynchCodes commented 5 years ago

Just realized this is a dup of https://github.com/nkbt/react-debounce-input/issues/65 and all I needed to do was change the "ref" on DebounceInput to "inputRef". BAZINGAAA!

thanks again! 👋