Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

lost focus when using onChange #164

Closed
rafipiccolo opened this issue May 25, 2021 · 4 comments
Closed

lost focus when using onChange #164

rafipiccolo opened this issue May 25, 2021 · 4 comments

Comments

@rafipiccolo
Copy link

i use nextjs, and i intalled the latest version : react-simplemde-editor 5.0.1
i lose focus when i type and i had registered onChange.

issue #150 speaks about the same problem but i use class, not hooks.

sample code can be this :

import { withAuthSync } from '../utils/auth.js';
import React, { Component } from 'react';
import Layout from '../components/Layout.js';
import Head from 'next/head';
import PropTypes from 'prop-types';

import dynamic from 'next/dynamic';
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), {
    ssr: false,
});

class Editor extends Component {
    static propTypes = {
        me: PropTypes.object,
        post: PropTypes.object,
    };

    constructor(props) {
        super(props);
        this.state = {
            content: 'content',
        };
    }


    render() {
        console.log('render', this.state);

        return (
            <Layout me={this.props.me}>
                <Head>
                    <title>{this.state.name || 'editor'}</title>
                    <link href="https://unpkg.com/easymde/dist/easymde.min.css" rel="stylesheet" />
                    <link href="https://unpkg.com/react-toastify/dist/ReactToastify.css" rel="stylesheet" />
                </Head>
                <SimpleMDE
                    value={this.state.content}
                    onChange={(value) => this.setState({ content: value })}
                    options={{ indentWithTabs: false, tabSize: 4 }}
                />

            </Layout>
        );
    }
}

export default withAuthSync(Editor);
@RIP21
Copy link
Owner

RIP21 commented May 25, 2021

Try to memoize options (put them in class field) and onChange handler (same).

Other than that, please, create a reproduction on codesandbox.

@rafipiccolo
Copy link
Author

But, it was working with version 4.1.3. i switched back to it to double check and have a working version.

Is this a breaking change ? Should i switch to hooks to make this module work now ?
else, do you have an exemple for memoizing ? i see many ways of doing it and i'm not sure about which one you mean.

I created a codesandox as you requested. i have same error, although i tried using hooks.
when i type into the textbox i lose focus.
https://codesandbox.io/s/objective-spence-mv5yp?file=/src/App.js

can you help me pointing the issue ? or is it really a bug.

@rafipiccolo
Copy link
Author

aaah, i finally understood what you mean by memoizing.
thanks it works now.

@RIP21
Copy link
Owner

RIP21 commented May 25, 2021

@rafipiccolo glad you fixed it.
Although I think I can create a bug/feature that will keep focus while typings AND changing options based on the value...
But unsure it's an easy task, nor needed, as, well, options shall not be changed on each render as it will be a huge performance hit (as on each value change there will be a new instance of editor created.

@RIP21 RIP21 mentioned this issue Sep 11, 2021
Closed
@ANJALI2980 ANJALI2980 mentioned this issue Feb 10, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@RIP21 @rafipiccolo