Dialog: breakpoints are janky

[KOliver94]

Describe the bug

There are multiple issues with Dialog breakpoints right now.

Issue 1: Breakpoints does not work in React.StrictMode. You can even see in the provided CodeSandbox project that the necessary CSS parts are not added. As I see that was an issue earlier as well #3922.

Issue 2: The value of style has priority over the breakpoints values. I just removed the strict mode from the CodeSandbox example project and you can see the following:

Reproducer

https://codesandbox.io/s/primereact-dialog-breakpoints-issue-7dxvrm

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[KOliver94]

Hey @kl-nevermore and @melloware,

The fix seems to work for Dialog but it still seems to be broken for ConfirmDialog. Can you check it please?

Thank you!

[melloware]

@KOliver94 can you open a new ticket for ConfirmDialog. It seems like ConfirmDialog doesn't define breakpoints as a property or pass it through to Dialog from what I am looking at the code?

[melloware]

HMmm actually it does pass through BreakPoints.

breakpoints: getPropValue('breakpoints'),

[melloware]

@KOliver94 I just tested it with this and it seems to be working for me?

<ConfirmDialog
    group="declarative"
    visible={visible}
    onHide={() => setVisible(false)}
    message="Are you sure you want to proceed?"
    header="Confirmation"
    icon="pi pi-exclamation-triangle"
    accept={accept}
    reject={reject}
    style={{ width: '50vw' }}
    breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
/>

[KOliver94]

Thank you @melloware, I found the issue with my code. Earlier breakpoints only worked if I passed them directly to the <ConfirmDialog> component even if I used confirmDialog function to invoke it. It seems now it is fixed and I need to add the breakpoints to the function to make it work.