RichTextEditor not working inside a FormControl

[kayb-proxora]

Hello!

I'm trying to use the RichTextEditor inside a MUI FormControl to display error messages, etc.

<FormControl
    error={!!error && !isDisabled}
    disabled={isDisabled}
    fullWidth
>
    <FormLabel
        id={labelId}
        required={required}
    >
        {label}
    </FormLabel>
    <RichTextEditor
        aria-labelledby={labelId}
        ref={ref}
        extensions={extensions}
        content={value ?? ''}
        editorDependencies={[value]}
        onBlur={({ editor }) => {
            const htmlValue = editor.getHTML();
            onChange(htmlValue);
        }}
        renderControls={() => <RenderControls />}
        RichTextFieldProps={{
            variant: 'outlined',
        }}
        editable={!isDisabled}
    />
    {((error?.message && !isDisabled) || helperText) && (
        <FormHelperText>{error?.message && !isDisabled ? error.message : helperText}</FormHelperText>
    )}
</FormControl>

Unfortunatelly, I see a lot of errors from MUI:

MUI: There are multiple `InputBase` components inside a FormControl.
This creates visual inconsistencies, only use one `InputBase`.

And all the menu buttons are not working correctly. Once I clicked on any button, all other buttons have a focussed mark.

Any suggestion on how I can use it inside a FormControl?

[sjdemartini]

There wasn't any specific support added for using RichTextEditor inside of FormControl. There are some notes in the README here https://github.com/sjdemartini/mui-tiptap?tab=readme-ov-file#re-rendering-richtexteditor-when-content-changes about why it's not very efficient or practical to use RichTextEditor as a fully "controlled component". As such, it wouldn't lend itself well to be used with <FormControl /> (where it would need to utilized context-provided controlled state). It is also not utilizing Input (or the associated components that can be used with FormControl), since we need to render the contenteditable Prosemirror container element from Tiptap, not an ordinary HTML input element.

In your case, I would recommend just omitting using <FormControl> and set your label and helper text props more directly (rather than via FormControl). You could even use more vanilla components for your helper text (e.g. <Typography variant="caption" color={isDisabled ? "textDisabled" : (error ? "error" : "textSecondary")}>) and label.

Hope this helps. I'm going to close this out, since I don't think there's much we can do to support FormControl with a component like this unfortunately. But if there's something specific that you feel like could be improved still, please follow up again.