Is it possible to register divs with contenteditable=true ?

[alessiopece]

Hi, I need to create an input field where if the user types specific words, they become bold. Unfortunately, I can't do that with an input/textarea element. I tried to create a div with the attribute contenteditable set to true, but I'm not able to register its ref.

Is there any other way I can achieve this?

[bluebill1049]

I think you will need a custom register

useEffect(() => {
  register('name')
}, [register])

and setValue API

[alessiopece]

Thanks for the reply. It works with a custom register.

[linecept]

There is a more complete answer here.

First register your div contenteditable:

 useEffect(() => {
    register(
      { name: 'name' },
      { required: true, maxLength: 75 }
    );
  }, []);

Then inside the div editable do this:

< div 
contenteditable
onInput={(e) => {
  setValue('name', e.currentTarget.textContent, { shouldValidate: true });
}}>contenteditable</div>

Important here is to include the shouldValidate inside the onInput of the div contenteditable.

[nobleach]

I run into all kinds of problems with this. One, I can't use register in this context if the component is hooking into a FormProvider. I get Uncaught TypeError: path.split is not a function. I'm not sure if Version 7 may be different.

I have to do something like this:

    <ConnectForm>
      {({ register, setValue, formState: { isDirty } }) => (
        <h1
          {...register('campaignName')}
          className={styles.vpCampaignName}
          contentEditable={isEditable}
          onInput={e => {
            console.log('isDirty in CampaignName', isDirty); // is always false
            setValue('campaignName', e.currentTarget.textContent, { shouldValidate: true });  
          }}
        >
          {campaignName}

          <Icon
            icon="pencil"
            onClick={() => setIsEditable(!isEditable)}
          />
        </h1>
      )}
    </ConnectForm>

But I notice even after changing the value of the editable div, isDirty is still false.

Oddly, I can submit the form and see what the value is for that field... but it's almost as if React Hook Form isn't able to watch the field if it's not a real input.

[brvnonascimento]

@nobleach You can make it go dirty by passing the "shouldDirty" flag:

<h2
  {...register('name', {
    required: 'Title cannot be empty',
  })}
  onInput={(e) => {
    if (e.currentTarget.textContent) {
      setValue('name', e.currentTarget.textContent, {
        shouldDirty: true,
      });
    }
  }}
  contentEditable="true"
>
  {name}
</h2>;

[RobJJ]

Thx for this suggestion - Im testing this solution in a custom textarea component that I need to build. Just wondering...

1. Are their any performance hits when dealing with a registered field in this manner?
2. How would you then show the value of this registered 'input' on load? Calling getValue and setting the innnerHTML seems like a recipe for disaster

[evandojunior-hotmart]

thx for that answer, it helped me with my problem rn ❤️