Using a custom widget causes re-render and loses focus

[macintushar]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

chakra-ui

Version

5.x

Current Behavior

I have added a custom widget. When I type in it in the form, it re-renders the field, which causes it to lose focus on the input field and moves the cursor's current position to the beginning of the input field. Note: If autofocus is not present in the input props, it completely loses focus and I can't type at all.

Screen.Recording.2024-09-12.at.12.03.24.PM.mov

Expected Behavior

Ideally, it should work the same way the default input function works. It shouldn't lose focus and shouldn't rerender.

Steps To Reproduce

1. Register a Custom Widget
2. Use custom widget in a form

Environment

- OS: macOS Sonoma
- Node: v22.3.0
- npm: 10.8.1

Anything else?

I followed the code written in the docs here
https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-widgets-fields

[heath-freenome]

@macintushar Without looking at the code of your widget we can't help you. I'm guessing that having the field rerender itself is the cause of the issue. React is really picky about how rerenders work especially around focus/blur behaviors and how callbacks work. I would focus on that first

[macintushar]

Hey @heath-freenome, this is the code i'm using. It's from the docs.

const MyCustomWidget = (props: WidgetProps) => {
    return (
      <input
        type='text'
        className='custom'
        value={props.value}
        required={props.required}
        onChange={(event) => props.onChange(event.target.value)}
      />
    );
  };

  const widgets: RegistryWidgetsType = {
    customWidget: MyCustomWidget,
  };

Screen.Recording.2024-09-15.at.6.46.31.PM.mov

[macintushar]

Hey @heath-freenome, did you get some time to check out the issue? ^