RHFInput + Semantic UI Select / Checkbox

[react-hook-form]

RHFInput + Semantic UI Select / Checkbox

[njuro]

True, here it is https://codesandbox.io/s/dazzling-napier-ne3e6 do whatever you want with it, I don't have experience publishing npm packages :) So far it contains wrappers for TextInput, Select, Checkbox, Button and Form itself

[raymond-ong]

I think I am encountering the same issue with Semantic UI Dropdown.
Also, notice from @njuro 's CSB, you need to click the checkbox 2 times for it to get ticked.
For the Dropdown case, nothing happens the first time the user selects something. Only the second attempt selects something from the Dropdown.
Regardless, I'm getting "undefined" inside the submit function.
Please advice. Thank you!

[bluebill1049]

thanks @JeromeDeLeon why not use onChangeEvent ? there is an example in readme for react native.

[njuro]

@JeromeDeLeon @bluebill1049 Thanks for the hints guys, I think I figured it out: https://codesandbox.io/s/dazzling-napier-ne3e6

@raymond-ong hope it will solve your issue too

[njuro]

Thanks @JeromeDeLeon now it works perfectly. I already created a little library in my project which wraps Semantic UI form components in RHFInput so I can work with it seamlessly, might publish it as a package once I polish it.

[bluebill1049]

closing this issue for now :) we can keep the conversation in here :)

[njuro]

@bluebill1049 yes I added it here https://codesandbox.io/s/dazzling-napier-ne3e6 see form/FileInput.js

[JeromeDeLeon]

Can you generate a codesandbox for this one? Thanks.

[bluebill1049]

Thanks I will investigate the issue soon, in the meantime you could leverage custom register at useffect. React hook from input just some sugar syntax on top. Oh and please provide a codesandbox if u can.

[JeromeDeLeon]

I think the problem lies in how we get the value from onChange and onBlur event because SUI passes the value to second param onChange(e, props) like so that's why data is always undefined because it only checked the e where the value is in the second param or maybe we can move that in state. Plus, invalid prop "value"... is showing when passing value that doesn't conform to their types (string or number).

[JeromeDeLeon]

@njuro and @raymond-ong , I'l try to provide an example for this and let you know guys.

[raymond-ong]

@JeromeDeLeon @bluebill1049 Thanks for the hints guys, I think I figured it out: https://codesandbox.io/s/dazzling-napier-ne3e6

@raymond-ong hope it will solve your issue too

Thanks @njuro for the codesandbox and @bluebill1049 for the onChangeEvent suggestion!
Will give it a try tomorrow :-)

[JeromeDeLeon]

Might as well share it here :)

[bluebill1049]

that's awesome @njuro share the lib in here, we can publish it in our docs website.

[bluebill1049]

@bluebill1049 Sorry, I had the following misconception: inputs with a type of file can be controlled, which was cleared by the reactjs docs.

In React, an <input type="file" /> is always an uncontrolled component because its value can only be set by a user, and not programmatically.

I was trying to solve a problem the wrong way. I just used a hidden input (<input type="hidden" {...} />) and that was it 😁

Thank you for this great library and for the quick response! Have a good weekend!

no worries at all 👍 glad it's working out. you have a great weekend too.

[bluebill1049]

@njuro are you using the latest version?

[JeromeDeLeon]

I replicated your issue and led me to react-hook-form using my build though.

[njuro]

Here is the CSB: https://codesandbox.io/s/suspicious-frog-75c77

RHF is aware of the fields, but they are always undefined.

Looks like react-hook-form-input version 1.1.5 solved the error thrown by checkbox, but the value is still not there

[JeromeDeLeon]

I can think of two solutions (maybe @bluebill1049 has better idea):

1. Lift the state up and let the user pass the data:

// outside RHFI component
const handleChange = (e, { checked }) => {
  return checked;
}

// inside RHFI component
const handleChange = async (...args) => {
  // onChange here is the prop to lift
  const data = await onChange(args);
  setValue(name, data, isOnChange);

  // we can remove this
  if (onChange) {
    onChange(e);
  }
};

2. We accept second param to accomodate SUI like what @bluebill1049 did in react-select

const handleChange = (e, props) => {
  const data = commonTask(e && e.target ? e.target : isSUI ? props : e);
  setValue(name, data, isOnChange);
  if (onChange) {
    onChange(e);
  }
};

[JeromeDeLeon]

Oh! Thanks! @bluebill1049 I forgot that one.

[JeromeDeLeon]

Can we not make it asynchronous?

[bluebill1049]

Can we not make it asynchronous?

what do you mean?

[JeromeDeLeon]

await event(args) something like this?

[bluebill1049]

hmm then you need async right?

[bluebill1049]

and it will always return promise and resolve

[JeromeDeLeon]

Yes we can await that one.

[JeromeDeLeon]

Anyway this is beyond the scope of the issue. we'll move this discussion in the spectrum.

[bluebill1049]

sounds good

[bluebill1049]

awesome @njuro! that's what i referred above.

[njuro]

Thanks @bluebill1049 , the last thing that annoys me is the
Warning: Failed prop type: Invalid prop 'value' supplied to 'Checkbox', which shows when the page is loaded, but does not seem to affect functionality.

[bluebill1049]

we should fix it, do you have a codesandbox for it? let's patch it.

[JeromeDeLeon]

@njuro , I mentioned that case above. Sorry, I wasn't able to follow up the example.

[JeromeDeLeon]

@njuro You can solve it by passing value as string like tos or isTos

[bluebill1049]

@raymond-ong no worries 👍 guys

[njuro]

I added TextArea component to the CSB, but I am having a hard time figuring out how to preserver the value of uploaded file - see FileInput component. Any ideas @JeromeDeLeon @bluebill1049 ?

[njuro]

I investigated: I can cache the event in onChangeEvent method just fine and then log it:

function handleChange([event]) {
    const file = event.target.files[0];
    console.log(file);
}

But as soon as I try to return {value: file} or setValue(name, file) I get InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

I made temporary workaround by passing a callback to FileInput which will store the uploaded file in parent component's state but that is not optimal. Can you think of something? Thanks.

[bluebill1049]

do you have a codesandbox for this?

[bluebill1049]

hey @njuro, after some investigation: you will need to use onChangeEvent for input file.

[njuro]

@bluebill1049 thanks, can you provide an example please? I am already using onChangeEvent in my codesandbox, but it generates said error

[bluebill1049]

oh that's right @njuro i will do it today :)

[bluebill1049]

use this :)

function handleChange([event]) {
    return {
      value: event.target.value
    };
  }

[njuro]

@bluebill1049 event.target.value contains only path/filename e.g. C:/fakepath/image.jpg, not the file content itself

[bluebill1049]

what about e.target.files?

[bluebill1049]

do you have reference on how semantic UI does it for onChange with input file?

[njuro]

I have no problem accessing the File object through event.target.files as I demonstrated in that CSB, I can log it to console. The issue happens when I try to assign the File object to value property either through setValue or through return { value: file }

[bluebill1049]

how does semantic UI handle onChange?

[bluebill1049]

worse case you may have to

function handleChange([event]) {
   setValue() // you probably already doing that
    return {
      value: event.target.value
    };
  }

[njuro]

@bluebill1049 Yeah, that's probably the best approach now. Closing this, thanks for you effort :)

[bluebill1049]

my pleasure :) @njuro 🙏

[alexfertel]

@bluebill1049 I have the same issue. Is there any way to solve this? I cannot use setValue in the onChange event of a raw input. I also tried onChageEvent with no luck.

[bluebill1049]

@bluebill1049 I have the same issue. Is there any way to solve this? I cannot use setValue in the onChange event of a raw input. I also tried onChageEvent with no luck.

Could you please share a codesandbox? also why you probably should consider to use Controller as this component is no longer maintained.

[alexfertel]

@bluebill1049 Sorry, I had the following misconception: inputs with a type of file can be controlled, which was cleared by the reactjs docs.

In React, an <input type="file" /> is always an uncontrolled component because its value can only be set by a user, and not programmatically.

I was trying to solve a problem the wrong way. I just used a hidden input (<input type="hidden" {...} />) and that was it 😁

Thank you for this great library and for the quick response! Have a good weekend!