jQuery UI Widgets Forums React Unable to click in jqxEditor and enter text

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Martin 1 year, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • mfearby
    Participant

    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);
        }
    • This topic was modified 1 year, 10 months ago by  mfearby.

    Martin
    Participant

    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/


    mfearby
    Participant

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


    Martin
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.