FormData disappears when using keyboard to select option #128

petemcfarlane · 2022-03-23T13:23:14Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FormData disappears when using keyboard to select option #128

FormData disappears when using keyboard to select option #128

petemcfarlane commented Mar 23, 2022

FormData disappears when using keyboard to select option #128

FormData disappears when using keyboard to select option #128

Comments

petemcfarlane commented Mar 23, 2022