Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Nik Butenko
    @nkbt
    since debounce input uses react/lib/ReactComponentWithPureRenderMixin - it then gets erplaced incorrectly
    André
    @rabalderandre
    Alright, thanks for the answer, I'll look into it.
    Anuj
    @oyeanuj
    Hi @nkbt! I had a quick question, if you are around. I'm wondering if you have tried integrating it with ReduxForm v6 by any chance?
    Anuj
    @oyeanuj

    Essentially, I am trying to build an auto-saving form which uses DebounceInput and would like to get the values onChange to submit. Now ReduxForm likes to tap into the onChange method of the input component to track the changes. So, I figured that I shouldn't specify onChange on DebounceInputso as to not overwrite ReduxForm behavior.

    That makes DebounceInput throw an error that onChange is a required prop. Code is below, any thoughts on how I could get it to work:

    //inside the render function
      const renderDebouncedInput = (field) => {
        return (
          <DebounceInput
            minLength = {1}
            debounceTimeout = {500}
            onChange = {field.input.onChange}
            value = {field.input.value}
          />
        );
      };
    
      return (
        <div>
          <label htmlFor =  {name} className = {labelClass} >
            <Field
              component = {useDebouncedInput ? renderDebouncedInput : "input"}
              type = {type}
              id = {name}
              name = {name}
              aria-label = {label}
              className = {inputClass}
              value = {value}
              placeholder = {placeholder}
              autoFocus = {autoFocus}
              { ...submitOnChange ? { onChange: onChange } : {} }
            />
            {label}
          </label>
        </div>
      );
    I guess another way to ask the same question is - what should be the parent component: ReduxForm's Field or DebounceInput since both accept custom components..
    Nik Butenko
    @nkbt
    Hi @oyeanuj
    There is a PR to make onChange optional..
    I need to update it and merge in
    I reckon that should solve your case.
    Anuj
    @oyeanuj

    I see. Just a couple of quick follow ups:

    1. Is the general idea that Field be the parent component of DebouncedInput correct? Or does DebouncedInput need to be the parent component in such cases?

    2. Also, the PR says that making onChange optional makes it a 'uncontrolled' input? What are the implications of that?

    3. Finally, any timeline on the PR? :)

    Thanks for the quick response!

    Nik Butenko
    @nkbt
    1. I don't use ReduxForm, so cannot give any advices on that, I do use similar pattern in our app so cannot see any issues with such usage.
    2. Uncontrollable in that case means that it might become uncontrollable if app needs, so it becomes true drop-in replacement for input. No onChange won't imply that.
    3. Well, as I can see someone actually needs it, so it makes sense for me to go back and finish it.
    Anuj
    @oyeanuj
    Got it! Looking forward to the PR - thanks :smile:
    Nik Butenko
    @nkbt
    meanwhile you can do onChange={submitOnChange ? onChange : () => {}}
    Anuj
    @oyeanuj
    Yes, I figured out an interim solution! Thanks for your help :)
    Anuj
    @oyeanuj
    Hi @nkbt! Hope things are well. I was wondering if you had a chance to think about Misha's comment here: https://github.com/moroshko/react-autosuggest/issues/169#issuecomment-271135637
    I'd love to be able to use both yours and his library together!
    Nik Butenko
    @nkbt
    Hi @oyeanuj yeah that was pretty much what I suggested by renamed somehow =) So instead of ref you accept whateverRef and set it to a child element internally.
    Anuj
    @oyeanuj
    @nkbt, I see. So, is that a change you'd have to make in react-debounce-input to accept a prop for ref (named something else) and then set it internally to input?
    Nik Butenko
    @nkbt

    @oyeanuj honestly I do not really understand the need to pass ref. If onChange will become optional - will it solve your case? Also I am pretty sure you will not get debounced capabilities if you use it with redux-form and it taps into onChange. So it makes no sense using react-debounce-input at all. Just use input in this case.

    Am I missing something here?

    Anuj
    @oyeanuj
    @nkbt Hey, maybe we are talking about two different things. I realized that higher up, I had asked you about using it with Redux-Form. I did solve that issue and made both play together.
    @nkbt The last message was regarding the react-autosuggest library. I was trying to make that library play with yours and Misha, the author of that library was suggesting solutions by passing through ref.
    I am up for any solution that both of you are happy with :)
    Nik Butenko
    @nkbt
    ah I see..
    well, it is not difficult to add one more prop. the problem is that it goes against react's architecture and doing so is not generally a good idea.
    So if it is possible to achieve this without such a nasty hack then we should totally explore another way
    Anuj
    @oyeanuj
    I can see that. Check out that thread and see if there is any other option that you like? I think Misha suggested another one. if you like that one great, otherwise let him know your thoughts and hopefully we can find another solution :smile:
    Nik Butenko
    @nkbt
    @oyeanuj Let's go with <DebounceInput inputRef={...} /> If you can make sure it works as expected - will merge a PR...
    Anuj
    @oyeanuj
    Ah, so option 1. Is there a branch or commit already that I can test against?
    Nik Butenko
    @nkbt
    nah, I haven't done anything to support it. I suggested if you wish to give it a shot - I will happily merge your PR =)
    Anuj
    @oyeanuj
    Hey Nik, quick question! I was using DebounceInput and for a particular case, I also needed to get access to the each individual onChange and the debounced onChange event. Essentially, I am using it on a textarea, and I typically use the debounced onChange to save to backend. But I am also trying to build a Twitter like character counter which changes as text is added, for which the debounced version of the onChange is proving to be a little slow in the UX.
    So would you consider exposing both the original onChange and debounced onChange? Maybe we can call the original onChange something else?
    Nik Butenko
    @nkbt
    Hi @oyeanuj
    hm yeah... Looks like there is a case for every onChange indeed.
    I reckon inputProps would be a reasonable solution (would solve ref/onChange at least)
    Anuj
    @oyeanuj
    Cool! So what wiuld your preferred or ideal API be then?
    Vegard
    @vhflat
    Hi! I'm having some issues with react-collapse
    when I rende <Collapse isOpened >....</Collapse> it animates on page load
    I thought it was supposed to be rendered statically
    Nik Butenko
    @nkbt
    @vhflat most likely your component's content is 0 hight on initial render and then it gets some content, if this is happening - then you will definitely have animation.
    Anuj
    @oyeanuj
    @nkbt let me know what your ideal API would be for out above discussion and I'll attempt a PR for the same!
    Nik Butenko
    @nkbt
    @oyeanuj inputProps = {ref, onChange} would be good!
    Alessandro Tagliapietra
    @alex88
    Hi there, I'm trying to use

    this is my render function

          <ReactElementResize debounceTimeout={200} onResize={this.onResize}> {() => (
            <ThemeProvider theme={this.theme}>
                ....
            </ThemeProvider>
          )} </ReactElementResize>

    however I get

    TypeError: render is not a function
        at ReactElementResize.render (Component.js:176)
    oh nvm, the extra spaces around the function
    Nik Butenko
    @nkbt
    Ok, cool
    Dmitry Badanin
    @boochamoocha
    Hi. In ReactHeight how to manually measure the size of the particular component ?
    const getHeight = () => {
      console.log(getElementHeight(Component)); //error
    };
    Nik Butenko
    @nkbt
    const getHeight = (height) => {
      console.log(height); //error
    };