#joe-sca-3ds

1 messages · Page 1 of 1 (latest)

still saffron
#

Unfortunately this isn't the right forum for this but that does seem weird

#

I can't do anything here, it's way too specific, but I can flag internally

#

can you DM me your account id and the email address you contacted support from?

#

I'm an admin on the server I work for Stripe

plucky sorrel
#

I will do, thank you very much

still saffron
#

👋 @plucky sorrel

#

cc @vague totem who is the engineer on my team that was looking into this

plucky sorrel
#

thanks

vague totem
#

Hello!

plucky sorrel
#

really appreciate the help

vague totem
#

So I had a look at your support ticket and the videos really helped. I noticed in one of the videos that when someone clicked on the input field to enter their code it did get focus for a split second (the cursor entry bar appeared) but then focus was ~immediately stolen away by something else.

I had a look at your site and while the payment page is behind a login, I did notice you have some TrapFocus code there that I think may be responsible. It seems to be part of the Material components you're using, and seems to be used with modals. Are you using a modal to present the payment form or anything like that?

plucky sorrel
#

yes, i had noticed that it can initially be focussed

#

i am displaying a loading modal

#

the thing i find strange is that the. rest of the SCA auth is interactable

vague totem
#

Can you share the code you're using to display that modal?

#

Also, to clarify, the issue is specifically with elements that want focus (like input fields), correct? Buttons and links can be clicked just fine?

#

If so, that would fit with what I suspect.

#

Clicks are fine, but sustained focus (which is required to input text) is being prevented.

plucky sorrel
#

yes, that's correct

#

i have a loading state

#

which when true

#

will display this

#

<Dialog open={showDialog} fullWidth>
<DialogContent classes={{ root: classes.root }}>
<Backdrop className={classes.backdrop} open={!!loading}>
<CircularProgress size={100} thickness={4} />
</Backdrop>
<Typography variant="h2">{title}</Typography>

    <CircularProgress
      size={100}
      thickness={4}
      className={classes.progress}
    />
    <Typography variant="subtitle1">
      Please do not refresh or press the back button
    </Typography>
  </DialogContent>
</Dialog>
vague totem
plucky sorrel
#

import {
Dialog,
DialogContent,
Typography,
IconButton,
Backdrop,
CircularProgress,
} from '@material-ui/core';

vague totem
#

Ah, okay, let me see...

plucky sorrel
#

"@material-ui/core": "^4.11.3",

vague totem
#

Ah, yep, that Dialog component is based on the Modal.

#

A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.

plucky sorrel
vague totem
#

And then on the Modal page:

It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.

plucky sorrel
#

i see

vague totem
plucky sorrel
#

so it was my fault all along!

#

thank you so so much for this

vague totem
#

Looks like there's a disableAutoFocus there you might be able to use.

#

If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus prop.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

plucky sorrel
#

i can't thank you enough for your help

vague totem
#

Well, let's make sure this is it first!

plucky sorrel
#

it makes sense

vague totem
#

I don't want to consider this resolved until we've proven it works. 🙂

#

Wait!

plucky sorrel
#

i have a friend with a card that is repeatedly seeing this issue

vague totem
#

That's the wrong property.

#

disableEnforceFocus

#

That's the one you want.

#

If true, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

plucky sorrel
#

thank you - i will double check the focus

#

i will do an update and rebuild my system

#

i will then ask the friend to try again and report back

vague totem
#

Let me know how it goes, I should be around for the next hour or so. I've turned on notifications for this thread. 🙂

plucky sorrel
#

they will be asleep now

#

so I will ask them first thing. in the morning

#

but i will do the update and site rebuilds now

#

(uk time)

still saffron
#

you can reply on the email thread we'll be on it too

vague totem
#

Ah, okay. I'll grab your support email, reply to it, and follow up there.

still saffron
#

we're just based on US hours

plucky sorrel
#

thanks again

vague totem
#

Happy to help! I hope that solves it!