Plaid keeps on flickering and couldn't enter account details

[hari-criticalasset]

Plaid keeps flickering and doesn't allow to enter account details.

When clicked on the input, it is getting focused but defocused instantly due to flickering.

Here is a video of the issue reproduction:

https://drive.google.com/file/d/1wr2kVA7fNegWvbTjIN_5XzNLBSSVKLud/view?usp=sharing

[aeidelson]

Hello @hari-criticalasset,

I'm sorry to see that you've been having problems.

We haven't been able to reproduce this issue on our side and wonder if it may be related to the specifics of your page. Would it be possible to share a page (or a url) where this bug occurs? It would also be helpful to know what browser and version you are using.

Thank you!

[daniellacoste]

Hey @hari-criticalasset,

Daniel from Plaid Support — I'll give you an assist with this issue in the Support ticket you filed. Thanks for flagging!

[hari-criticalasset]

Thanks @daniellacoste , @aeidelson

Chakra UI implements data-focus-guard="true" to enforce focus into Drawers and Modals.

This was fixed by using "trapFocus" property.

[osdiab]

For anyone that runs into this issue: my company also saw this behavior, but we don't use react-plaid-link (we just use the normal script tag) nor do we use Chakra UI. The reason it happened was because we triggered the plaid modal to open more than once on a single page. As a result, the multiple Plaid instances competed with each other for focus, causing it to be unusable. Hope this helps someone!

[reggieofarrell]

For anyone using Material UI... if your are loading Plaid inside of a dialog/drawer, you have to put disableEnforceFocus on the modal/drawer

[mlakmal]

For anyone using Material UI... if your are loading Plaid inside of a dialog/drawer, you have to put disableEnforceFocus on the modal/drawer

@reggieofarrell thanks this issue came up on our app as well with material-ui dialogs

[makeitraina]

For anyone using Material UI... if your are loading Plaid inside of a dialog/drawer, you have to put disableEnforceFocus on the modal/drawer

Thank you @reggieofarrell.

This comment is about to save thousands of peoples, a lot of time! Plaid should seriously have something related to this in their docs.

[TannerPlauche]

Thank you @reggieofarrell. This was giving me lots of trouble. That fixed it. THANK YOU!!!

[yousefa00]

@hari-criticalasset how exactly did you fix this? Where do you pass trapFocus?

[ChirayyuS]

I am experiencing same issue, I am not using Material-UI modal or any overlay components to load Plaid. but using usePlaidLink. how to add/pass trapFocus / disableEnforceFocus ?

[alecherryy]

Ran into the same issue; we too rendered the Plaid modal more than once with usePlaidLink(). Removing one of the instances, fixed the issue.