Elementor: Shortcode is being rendered two times in Preview

[rahulv3a]

When I add a custom shortcode that displays recent posts of custom post type, it renders fine the fist time in preview. But when close and open the preview again, Elementor renders it two times.

In the following screenshot, I have added the shorcode once but it rendered twice. Only the second one is selectable in the preview.

Steps to reproduce:

• Create a custom shorcode that displays recent posts (of any post type).
• Create a new page with Elementor Canvas page template.
• Add the custom shortcode in a shorcode widget. Save and exit to dashboard.
• Edit that page with Elementor again. The shortcode should be rendered twice.

Environment
WordPress v4.9.1
Elementor: 1.9.1
Theme: twentyseventeen (with custom shortcode and css tweaks).
Plugins: Only Elementor is installed and activated.

[bainternet]

@rahulnever2far

I can't replicate,

please paste your shortcode and I'll have a look.

[rahulv3a]

I figured out what caused that issue. The shortcodes are supposed to return and I was echoing markup. Echoing made Elementor display the output of the shortcode twice in the preview mode.

Here's a very simplified version of my shourtcode

add_shortcode( 'elementor_shorcode_test', 'elementor_shorcode_test' );
function elementor_shorcode_test() {
    elementor_shorcode_test_output();
}

function elementor_shorcode_test_output() {
    $elementor_shorcode_test_query = new WP_Query( array(
        'posts_per_page' => 4,
    ) );

    if ( $elementor_shorcode_test_query->have_posts() ) {
        while ( $elementor_shorcode_test_query->have_posts() ) {
            $elementor_shorcode_test_query->the_post();
            the_title();
        }
    }
}

Buffering output in elementor_shorcode_test() fixed the issue.

function elementor_shorcode_test() {
    ob_start();
        elementor_shorcode_test_output();
    return ob_get_clean();
}

I'm not sure if we still consider this an issue. On one hand, shortcodes are supposed to return (not echo). On another hand echoing creates the issue in the Elementor Preview but it works fine everywhere else.

[bainternet]

Not an issue with Elementor, its an issue with the shortcode, a shortcode should return the content and not echo it out.