fix(web): fix otp input box with themes (#1723)

#1584 introduced a regression due to the way layouts are addressed with [CSS normalization](https://material-ui.com/components/css-baseline/#layout).

This PR ensures that the OTP input box will remain a `content-box` to avoid any text display and box sizing issues caused by padding.

The OTP input has also been changed to only accept numbers.

Fixes #1720.
This commit is contained in:
Amir Zarrinkafsh 2021-02-13 15:31:57 +11:00 committed by GitHub
parent 361705738a
commit 2502b40cd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -27,6 +27,7 @@ const OTPDial = function (props: Props) {
value={props.passcode}
numInputs={6}
isDisabled={props.state === State.InProgress || props.state === State.Success}
isInputNum
hasErrored={props.state === State.Failure}
inputStyle={classnames(style.otpDigitInput, props.state === State.Failure ? style.inputError : "")}
/>
@ -48,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(2),
},
otpDigitInput: {
boxSizing: "content-box",
padding: theme.spacing(),
marginLeft: theme.spacing(0.5),
marginRight: theme.spacing(0.5),