Button doesn't react on first click due internal exception

[skynet-core]

I am using this library in one simple POC project. May be it is related to typescript compiling, but will be grateful for any help.
Lib version:

"@material-ui/core": "^4.8.1"

Here is an example of code:

import React from "react";
import { Formik, FormikProps, Form } from "formik";
import InputField from "../../components/forms/fields/Input";
import {
    validator,
    required,
    requiredAtLeastOne,
} from "../../components/forms/fields/validators";
import { Grid, Box, makeStyles } from "@material-ui/core";
import ActionButton from "../../components/buttons/ActionButton";
import { signIn } from '../../../main/api';
import { toast } from 'react-toastify';
export interface SignInFormValues {
    username: string;
    password: string;
}

export interface SignInProps {
    onChange: any;
    onSignin: any;
    onConfirm: any;
}

const useStyles = makeStyles((theme: any) => (
    {
        linkButton: {
            backgroundColor: 'transparent',
            outline: 'none',
            border: 'none',
            cursor: 'pointer',
            '&:hover': {
                color: '#6E09EA',
                textDecoration: 'underline'
            }
        }
    }
));

export default (props: SignInProps) => {
    const [loading, setLoading] = React.useState(false);
    const classes = useStyles();
    const { onChange, onSignin, onConfirm } = props;
    return <Formik
        initialValues={{
            username: '',
            password: '',
        }}
        onSubmit={(values: SignInFormValues, actions: any) => {
            const { username, password } = values;
            setLoading(true);
            signIn({ username, password })
                .catch(err => {
                    toast.error(`Sigin In failed: ${err.message}`, {
                        position: toast.POSITION.TOP_RIGHT,
                    });
                    if (err.code === "UserNotConfirmedException") {
                        onConfirm();
                    }
                    return null;
                }).then((user) => {
                    actions.setSubmitting(false);
                    setLoading(false);
                    onSignin(user);
                });
        }}>{(formProps: FormikProps<SignInFormValues>) => {
            return (
                <Grid container>
                    <Grid item sm={4}>
                    </Grid>
                    <Grid item sm={4}>
                        <Form onSubmit={formProps.handleSubmit}>
                            <Grid container spacing={2}>
                                <Grid item xs={12}>
                                    <InputField
                                        name="username"
                                        label="Username"
                                        size="sm"
                                        gutter={false}
                                        inputProps={{
                                            autoComplete: "name",
                                            id: "signin-name",
                                        }}
                                        validate={validator(required, requiredAtLeastOne)}
                                    />

                                </Grid>
                                <Grid item xs={12}>
                                    <InputField
                                        name="password"
                                        type="password"
                                        label="login.password"
                                        size="sm"
                                        gutter={false}
                                        inputProps={{
                                            autoComplete: "password",
                                            id: "signin-password",
                                        }}
                                        validate={validator(required)}
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <Grid container>
                                        <Grid item xs={4} style={{
                                            display: 'flex',
                                            flexDirection: 'row',
                                            alignItems: 'center'
                                        }}>
                                            <Box width={1} display="flex" mt={3}>
                                                <div style={{ width: '100%' }}>
                                                    <button type="button" className={classes.linkButton}
                                                        onClick={(event: any) => { onChange() }}>Sign Up</button>
                                                </div>
                                            </Box>
                                        </Grid>
                                        <Grid item xs={2}>
                                        </Grid>
                                        <Grid item xs={2}></Grid>
                                        <Grid item xs={4}>
                                            <Box width={1} display="flex" justifyContent="flex-end" mt={3}>
                                                <ActionButton title="Sign In" disabled={loading} feedBack={loading} />
                                            </Box>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Form>
                    </Grid>
                    <Grid item sm={4}>
                    </Grid>
                </Grid>
            )
        }}</Formik>
};

Here is an screenshot of an error

File where error occurs @material-ui/core/esm/utils/focusVisible.js
Function isFocusVisible

Additional information. After second click on button it works fine.

[oliviertassinari]

There is a try catch around. We run a feature detection. This is expected. You can disable the stop on all exceptions of Chrome Dev Tools.

I'm curious, what's the version of your browser?

[oliviertassinari]

I have checked, we are all good:

• The feature is still behind a flag in the latest version of Chrome: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
• By default, the checkbox is unchecked

cc @eps1lon as you might enjoy this issue (for curiosity).

[skynet-core]

@oliviertassinari , thank you. I put on this check box only for detecting the issue. The problem that "button doesn't fire "submit" within form on first click", doesn't matter debugger is on or off. Is it clear? It appears in Chrome/Firefox/Safari. I guess it something connected to that exception

[oliviertassinari]

@skynet-core Notice the default value of the type prop the Button uses. I'm sorry if it's counter-intuitive.

[eps1lon]

cc @eps1lon as you might enjoy this issue (for curiosity).

Either they changed it or I didn't look quite right. But I do explain in the very next line what is happening. The only issue is that it states that a SyntaxError is thrown while it's actually a DOMException.

Apparently this is misleading in case you break on every exception (not just uncaught). Since this kind of debugging is usually exploratory (from my experience) any comment that is slightly off can be very confusing.

I'll check again what type of error should be thrown.

[skynet-core]

@eps1lon thank you a lot. Actually my problem isn't exception within debugger. I added it just to show you because I thought it could help. The problem is that BUTTON with type="submit" doesn't submit form on first click. But simple html <button type="submit"> works well. Do you have any idea how I can solve it? Or do you think better solution will be to implement own button from scratch? :)

[oliviertassinari]

The only issue is that it states that a SyntaxError is thrown while it's actually a DOMException.

@eps1lon Oh wow 🔍! On my side, Firefox: SyntaxError, Safari: SyntaxError, Chrome: DOMException 🤷‍♂️, Spec: SyntaxError.

[oliviertassinari]

@skynet-core This is very likely a support request, please ask on StackOverflow (What's the probability for having a form submission bug in a framework used by hundreds of thousands of developers each month and having only surface it now?). Also, note that if you do ask there, people won't be able to help you without a reproduction (codesandbox is a great tool for that).

[eps1lon]

The problem is that BUTTON with type="submit" doesn't submit form on first click. But simple html <button type="submit"> works well. Do you have any idea how I can solve it?

This is better asked on StackOverflow. Adding the complete code (with a codesandbox) will accelerate the response time.

Or do you think better solution will be to implement own button from scratch? :)

Very likely not worth it.

@eps1lon Oh wow mag! On my side, Firefox: SyntaxError, Safari: SyntaxError, Chrome: DOMException man_shrugging, Spec: SyntaxError

To be fair a DOMException makes more sense if you refer to SyntaxError on MDN that defines it as an error that is thrown when the parser encounters code that isn't valid JS. This is invalid CSS though. ES spec does not tie SyntaxError to JS. Just states that

SyntaxError
Indicates that a parsing error has occurred.

which does apply. Either way it's a good reminder that catching specific errors can be problematic since browsers might not throw the correct one.