Calcite-Block event handlers doesn't fire instantly.

[sanikapatilEsri]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The onCalciteBlockBeforeOpen and onCalciteBlockBeforeClose events are not firing instantly as expected when user interacts with the calcite-block. This problem was found when tracking a calcite block's status and determining when its open or closed state needed to be maintained using the onOpen / onClose handlers. During debugging, it was discovered that a re-render interrupts a calcite block's toggling and onCalciteBlockBeforeClose is never getting called.

The block collapse expand also occurs even if the component is left uncontrolled (i.e removing the event handlers and just using the open property and a re-render occurs between the open and close. Additionally if a header-menu-actions slot is there along with the block being collapsible, adding onClick event doesn't let the header-menu-actions and the block contents be open at the same time where as in previous versions(2.8.5) it did allow that.

We are using the deprecated method onCalciteBlockToggle while this issue is fixed, hence we need this issue to be fixed before the onCalciteBlockToggle method is removed.

This is the repro link for the initial off eventing: https://codepen.io/jcfranco/pen/dyxgONL?editors=1001

I have also attached the sandbox link to reproduce the re-render issue: https://codesandbox.io/p/devbox/calcite-block-collapse-forked-49pwqv

Issue discussion reference: https://teams.microsoft.com/l/message/19:fd15b51dacd24e70895ec1218a54ae06@thread.skype/1730754470623?tenantId=aee6e3c9-711e-4c7c-bd27-04f2307db20d&groupId=56fae21a-9407-4943-859f-a9bfcf0bbad3&parentMessageId=1730754470623&teamName=Calcite%20Design%20System&channelName=Get%20Help%20-%20Development&createdTime=1730754470623

Expected Behavior

The calcite block events should fire instantly on interaction.

Reproduction Sample

https://codepen.io/jcfranco/pen/dyxgONL?editors=1001

Reproduction Steps

1. Open the codepen link
2. Toggle the calcite block and observe the close event doesn't fire instantly

Reproduction Version

https://codepen.io/jcfranco/pen/dyxgONL?editors=1001

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Knowledge