Unable to click in jqxEditor and enter text

[mfearbyParticipant]

If I copy the demo code here then I get console errors like this:

index.js:1375 Warning: Use the 'defaultValue' or 'value' props instead of setting children on <textarea>.
    in textarea (created by JqxEditor)
    in JqxEditor (at Tab.tsx:36)
    in div (created by Col)
    in Col (at Tab.tsx:35)
    in div (created by Row)
    in Row (created by Bootstrap(Row))
    in Bootstrap(Row) (at Tab.tsx:34)
    in Tab (at Tabs.tsx:18)
    in div (at Tabs.tsx:17)
    in div (created by JqxTabs)
    in JqxTabs (at Tabs.tsx:11)
    in Tabs (at Home.tsx:9)
    in div (at Home.tsx:8)
    in Home (at src/index.tsx:11)

There is no ‘defaultValue’ or ‘value’ property on the JqxEditor, either. So I’m baffled

It seems as though we can’t put the starting text for the editor between JqxEditor tags. But if I just leave it empty, I can’t click in the editor to start typing. If I do the following, then the text still doesn’t appear in the editor, and I still can’t click in it to type something:

    public componentDidMount(): void {
        var me = this;
        // Timeout for good measure
        setTimeout(function() {
            me.myEditor.current!.val('New Editor Value!');
        }, 1000);
    }

[MartinParticipant]

Hello mfearby,

I have tested the following example:

import * as React from 'react';

import JqxEditor from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxeditor';

class App extends React.PureComponent<{}> {

    private myEditor = React.createRef<JqxEditor>();
    
    constructor(props: {}) {
        super(props);
    }

    public componentDidMount(): void {
        this.myEditor.current!.val('New Editor Value!');
    }

    public render() {
        return (
            <JqxEditor ref={this.myEditor} width={800} height={400} />
        );
    }
}
export default App;

and it is working fine. The text is displayed in the editor and you can type in it.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[mfearbyParticipant]

I have tried to include a jQEditor in this codesandbox but I can’t get it to work

[MartinParticipant]

Hello mfearby,

In order to use jqwidgets inside jqxTabs you should use the initTabContent callback. You can see how it is used in the following Demo.

I have updated your CodeSandBox Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts