Datatable: Responsive broken in 7.2.0

[melloware]

If you go to the Showcase Responsive demo in 7.1.0 it works properly when shrinking your browser. However in 7.2 all of the Responsive UI features seem broken.

https://www.primefaces.org/primereact-v7/#/datatable/responsive

You can see its not stacking and the whole site seems not to be respecting the media queries. This is happening in my local app too.

7.1.0 Correct

7.2.0 INCORRECT

[melloware]

It looks like the dynamic inline styles are not being created...

@media screen and (max-width: 960px)
<style>
.p-datatable[pr_id_2] .p-datatable-tbody > tr > td {
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: space-between;
}

[melloware]

Broken by #2448

[FlipWarthog]

@melloware @mertsincan

I think the root issue is this change:

this.setState({ attributeSelector: UniqueComponentId() }, () => {
    this.el.setAttribute(this.state.attributeSelector, '');
});

if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
    this.createResponsiveStyle();
}

attributeSelector is being set in the call to setState then this.createResponsiveStyle() attempts to use that state value, but (since state updates are async) the value doesn't exist yet.

I tested the following change against the latest showcase running locally and it seems to address the chicken/egg situation by creating the responsive style in the setState callback function.

this.setState({ attributeSelector: UniqueComponentId() }, () => {
    this.el.setAttribute(this.state.attributeSelector, '');

    if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
        this.createResponsiveStyle();
    }
});

[melloware]

Nice analysis and fix!