Gutenberg RichText cursor focus automatically focus out

Question

I'm trying to enter text via Rich Text by function. but cursor automatically getting outside the RichText. I already import essential component which need on it. I also tried it by onKeyUp instead on onChange but also not working.

It's working good when i'm trying it without the ArticleContent function, but not working when trying with this ArticleContent function.

Below is my codes (It's not working)

registerBlockType('vixmi-support/test', {
    title: __('Test Block'),
    icon : {
        src       : 'media-spreadsheet'
    },
    category   : 'vixmi',
    description: 'Sample desc',
    keywords   : [
        __( 'Single Article' ),
        __( 'Article' ),
    ],

    supports:{
        align : true,
        anchor: true
    },

    // custom attributes
    attributes:{
        title: {
            type    : 'string',
            source  : 'html',
            selector: 'h4',
        },
        articleLayout: {
            type   : 'string',
            default: 'left',
        }
    },


    edit: ( {attributes, setAttributes} ) => {
        const{
            title, content, buttonTitle, buttonLink, linkTarget, articleLayout
        } = attributes;

        function UpdateArticleTitle(newTitle){
            setAttributes( { title:newTitle } )
        }
        function UpdateActionLayout(event){
            setAttributes( { articleLayout:event.target.value } )
        }

        function ArticleContent(props){
            const{
                title
            } = props.attributes;
            return(
                <RichText
                    key         = "editablec"
                    tagName     = "h4"
                    placeholder = "Article title"
                    value       = { title }
                    onChange    = { UpdateArticleTitle } />
            )
        }

        return([
            <div className="sample">
                <ArticleContent attributes={ attributes }/>
            </div>
        ])
    },
    save: ( {attributes} ) => {
        const{
            title
        } = attributes;

        return(
            <div className="sample">
                <h4>{title}</h4>
            </div>
        )
    },

});

Answer 1

I'm not at all sure why this is happening, but after struggling with it myself I found that doing the equivalent of { ArticleContent( { attributes: attributes } ) } rather than <ArticleContent attributes={ attribbutes }/> solves the issue.

The practical difference is that RichText is not actually wrapped by a component, but why that makes any difference is beyond me even after browsing the Gutenberg code for about an hour.