React Mathquill command to make readOnly

Question

I have created a number of MathQuill fields using React for MathQuill. After typing into fieldA and moving on to fieldB, I want fieldA to become readOnly upon .onFocus() in fieldB.

I am using React MathQuill as my reference. I am guessing that there might be a way to use the .config() method to make fieldA read only or convert it into a static MathQuill element. But I haven't been able to figure out how. Any help would be greatly appreciated. Thanks.

Answer 1

MathQuill does not have an official way to make a MathField read only, but you can achieve it by disabling the underlying HTML textarea with the disabled attribute.

See the following example: https://codesandbox.io/s/angry-wing-bk1yj

Answer 2

The substituteTextarea field did the trick for me:

<EditableMathField
    config={{
        substituteTextarea: () => {
            const textarea = document.createElement('textarea')
            textarea.disabled = disabled
            return textarea
        },
    }}
/>