shouldFocusAfterRender doesn't function with custom modal CSS classes

[SeanMcP]

Summary:

When using custom CSS classes for the modal, the shouldFocusAfterRender property boolean has no discernible effect on the modal: it is always focused on render.

Steps to reproduce:

1. Open custom CSS example: https://codepen.io/claydiffrient/pen/KNjVrG
2. Add property to ReactModal component: shouldFocusAfterRender={false}
3. Click "Trigger Modal" button

Expected behavior:

I expect the modal to be unfocused on render when the shouldFocusAfterRender property is set to false.

Link to example of issue:

Example following the steps to reproduce above: https://codepen.io/SeanMcP/pen/pLNYeR

Additional notes:

After further investigation, the problem seems to apply to any use of shouldFocusAfterRender and not just instances where custom CSS classes are used. I am happy to update this issue to reflect that, but I am primarily concerned with custom styles.

[indiesquidge]

Hey, @SeanMcP. Looks like you're examples are using a fairly old version of ReactModal (v1.6.2). The shouldFocusAfterRender prop was not added to this library until v2.3.1. Is it possible for you to upgrade your app's version of this library?

[SeanMcP]

That was indeed the case. Our project is using "^3.3.2" and shouldFocusAfterRender worked as expected.

Might I suggest updating the packages in your CodePen examples to reflect latest features?

[clintonhalpin]

Still seeing this issue with 3.4.4 3.5.1 of React Modal