Evaluated for use: No way to prepoulate values, backspace does not behave as expected

[bcowgill]

Hi, I'm evaluating your control for a project we have to input text into specific slotted positions.

We are just using CSS to position the slots on a normal input control but it doesn't match always because of proportional spacing.

Your control looks good if we can style it to just look like a horizontal line.

But I noticed when you backspace in the middle of the boxes it doesn't pull the characters after the box over to the left as expected.

Is there a way to easily support this?

I also tried to paste using your demonstration page and that didn't work. I noticed an onPaste prop so was hoping it would.

-- Update after playing around. Paste is working though it does not paste into the middle of the string of boxes.

However I don't see a way to pre-populate the boxes. I tried adding value= or defaultValue= props like a normal input control but that did not work. Perhaps this can be done some other way?

This is a show stopper for us as we save the values typed values and restore them as they go through the steps.

[rromikas]

I was able to prepopulate values by accessing inputElements from reference:

<RICIBs
    ref={(el) => {
      if (!initialValueSet) {
        try {
          Object.values(((el as any)?.inputElements as HTMLInputElement[]) ?? {})?.forEach((input, i) => {
            input.value = value[i] ?? "";
          });
        } catch (er) {}
        setInitialValueSet(true);
      }
    }}
 />