Gutenberg: SandBox not re-rendered after HTML changes

Created on 31 Jul 2019  路  2Comments  路  Source: WordPress/gutenberg

Describe the bug
The SandBox component from the @wordpress/components package is not re-rendered when the injected html prop changes.

To reproduce

  • Paste the following code in playground/src/index.js:
import { render, useState, Fragment } from '@wordpress/element';
import { SandBox, SelectControl } from '@wordpress/components';
import './style.scss';
import '@wordpress/components/build-style/style.css';

function App() {
    const [ fruit, setFruit ] = useState( 'Bananas' );
    const html = `<div>Selected fruit: <strong>${ fruit }</strong>!</div>`;

    return (
        <Fragment>
            <SelectControl
                label="Fruit"
                value={ fruit }
                options={ [
                    { label: 'Bananas', value: 'Bananas' },
                    { label: 'Oranges', value: 'Oranges' },
                    { label: 'Apples', value: 'Apples' },
                ] }
                onChange={ ( value ) => { setFruit( value ) } }
            />
            <SandBox html={ html } />
        </Fragment>
    );
}

render(
    <App />,
    document.querySelector( '#app' )
);
  • Run npm run playground:start.
  • Go to http://localhost:1234.
  • Select any other fruit than _Bananas_.

Expected behavior
The selected fruit text displayed below the fruit selector should be updated after selecting any other fruit, but it keeps unchanged:

Screenshots
Screen Shot 2019-07-31 at 14 32 38

[Package] Components [Status] In Progress [Type] Bug

Most helpful comment

Sounds like a duplicate of #16612.

Can you test #16669 to see if that fixes the issue?

I don't think it's related to #16612. I verified I can still reproduce the issue with #16669.

Seems to be more a problem on how the SandBox component is implemented. The render function doesn't use at all the html prop, which is why any change to that prop doesn't trigger any update. The html prop is only used on trySandbox, but that method is only called after the SandBox component has been already rendered.

All 2 comments

Sounds like a duplicate of #16612.

Can you test #16669 to see if that fixes the issue?

Sounds like a duplicate of #16612.

Can you test #16669 to see if that fixes the issue?

I don't think it's related to #16612. I verified I can still reproduce the issue with #16669.

Seems to be more a problem on how the SandBox component is implemented. The render function doesn't use at all the html prop, which is why any change to that prop doesn't trigger any update. The html prop is only used on trySandbox, but that method is only called after the SandBox component has been already rendered.

Was this page helpful?
0 / 5 - 0 ratings