Material UI v4 and ACH

It seems like open Material-UI dialogs and the ACH plaid overlay do not play well together.

ezgif-4-c52ddb9136

Notice that focus is being forced to the back button. This does not allow me to enter anything into the text fields. If I press the tab button, the focus shifts to the next element but then is immediately returned to the back button.

It seems this only happens with an open version 4 Material-UI dialog. If I close all dialogs or use Material-UI version 5, this issues does not present itself. I’m wondering if anyone is away of a workaround or fix as upgrading to Material-UI 5 is not really possible for me. I can go back to our design team and ask for changes that would not require a dialog but I am trying to exhaust all other possibilities first.

Is this with the React Web Payments SDK built by Seeed? :slightly_smiling_face:

It is not. I’m injecting https://sandbox.web.squarecdn.com/v1/square.js directly into my app and using the examples from the docs.

This is a web app that you’re building? :slightly_smiling_face:

Yes it is. I can provide example source code if needed

Are there any updates on this issue? I’m just wondering if I need to start looking for alternate solutions.

If you could provide the source code we can definitely take a look. :slightly_smiling_face:

Here is a github repo with the example.

Just clone and run npm install. Further instructions can be found in the README.md

I just tested and it’s working as expected on my device. I was able to successfully checkout. What browser are you using? :slightly_smiling_face:

Thanks for trying the code. I’ve asked a few of my team members to try on their devices so far we have seen the issue on the following:

  • Chrome: Version 103.0.5060.134 (Official Build) (64-bit), Node: v16.16.0
  • Chromium: Version 102.0.5005.115 (Official Build) Arch Linux (64-bit), Node: v16.13.2
  • Chrome 103 on macOS (Monterey), Node: v14.16.0

Hi Brain!

Any updates on this issue?

Hi @josh_InvoiceMaker. We haven’t been able to replicate this. Did the team members that tested this experience the same issue? :slightly_smiling_face:

Yes, every team member I’ve given this to has experienced the same issue.

He have adjusted our design to work around this issue. We are able to move forward. So at this point this issue is more for informational purposes.

Looking again at the video you provided it differs from what I see when I checkout using your example. There is a popup that I have to click through before I get to the point where user name and password is required. Are you blocking any popups? :slightly_smiling_face:

So the issue is that the plaid integration will exert the bad behavior while a popup is open. The gif just shows the bad behavior. The example app is designed to show that plaid does not work with an open popup but does work if that popup is not opened. I will create a new video showing the popup and post it here when its ready.

Why is there an additional popup other than the one that’s needed to check the customer out via ACH? :slightly_smiling_face:

Our original UX design called for it. We have since worked with the designers to adjust the UX to allow a flow without a popup

Here is a gif of the issue using the example app
ezgif-4-58644a514a