Dialog subcomponent of Modal creates side effects within render.

[Flufd]

Issue summary

The Modal component focuses the first element it can find. This happens during the rendering of the component. If there is a handler for onBlur on the currently focused element which sets state e.g. Polaris's TextField component, React will complain with:

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Note that this will only show once in the console, as React silences the warning after the first one. See: https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-reconciler/src/ReactFiberWorkLoop.js#L2695

Possibly related issue #2641

Expected behavior

Side effects of opening the Modal should not happen in the render loop.

Reduced test case

https://codesandbox.io/s/polaris-modal-side-effect-3d4b8
Opening the modal will cause the warning in the console.

Specifications

• Are you using the React components? (Y/N): Yes
• Polaris version number: 4.11.0
• Browser: Chrome Version 79.0.3945.117 (Official Build) (64-bit)
• Device: Mac Pro 15
• Operating System: Catalina 10.15.2

[BPScott]

Ping @AndrewMusgrave and @LauraAubin, this might be one for you two.

We'll need to fix this in both the master and v5 branches

[devchris]

This also causes issues if you have an autocomplete inside a modal.
unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.