Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FormData disappears when using keyboard to select option #128

Open
petemcfarlane opened this issue Mar 23, 2022 · 0 comments
Open

FormData disappears when using keyboard to select option #128

petemcfarlane opened this issue Mar 23, 2022 · 0 comments

Comments

@petemcfarlane
Copy link

I'm experiencing a rather strange issue - when selecting an option with mouse, the event bubbles up to the form and I can inspect the form data, but when selecting an option with keyboard (SPACE or ENTER) the form input is completely missing!

To reproduce:

<html>

<head>
    <script src="./easydropdown.js"></script>
    <link id="theme-sheet" href="./flax.css" rel="stylesheet" />

</head>

<body>
    <form id="edd">
        <select name="field1">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <select name="field2" disabled>
            <option>x</option>
            <option>y</option>
        </select>
        <select name="field3">
            <option>x</option>
            <option>y</option>
        </select>
        <input name="text_field" />
    </form>
    <script>
        document.body.onload = () => {
            const form = document.getElementById('edd')
            form.addEventListener('change', function (e) {
                const fd = new FormData(form);

                console.log([...fd])
            })

            easydropdown.all()
        }
    </script>
</body>

</html>

When I change a value of the first select by clicking in the body with mouse I see output in the console like

[["field1", "B"], ["field3", "x"], ["text_field", ""]]

but when I use the keyboard I get

[["field3", "x"], ["text_field", ""]]

I think it's to do with this line https://github.com/patrickkunka/easydropdown/blob/caa479bd36/src/Events/Handlers/handleSelectKeydown.ts#L35 which is disabling the select, then removing the disabled.

Why is this necessary? I'm sure it was added 4 years ago for a reason... Any idea as to how we can get around this instead?

Thanks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@petemcfarlane