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

On POST, vaadin-select is not included in the POST values #7378

Closed
fredt34 opened this issue May 3, 2024 · 5 comments
Closed

On POST, vaadin-select is not included in the POST values #7378

fredt34 opened this issue May 3, 2024 · 5 comments
Labels
enhancement New feature or request vaadin-select

Comments

@fredt34
Copy link

fredt34 commented May 3, 2024

Description

I'm trying to use vaadin web components on a regular web page outside the vaadin ecosystem - just html and javascript. Same context as #7377.

On POST, FormData does not contain the value (nor the title) of the entry selected in a vaadin-select - vaadin-select is just omitted.

        <vaadin-select id='vaadin-select' name='vaadin-select' label='vaadin-select'>
        </vaadin-select>
        <script>
            select = document.querySelector('#vaadin-select');
            select.items = [
                {  label: 'Label A', value: 'ce1521d8-cffd-11ee-baef-477d625ddaa8' },
                {  label: 'Label B', value: 'ce2e4046-cffd-11ee-baef-93b6cbfb74ea' },
                {  label: 'Label C', value: '45de575e-ea28-11ee-8718-df0dd9251f5f' }
            ];
            select.value = 'ce1521d8-cffd-11ee-baef-477d625ddaa8';
            console.log("vaadin-select updated")                    
        </script>

Expected outcome

I would expect the control to behave as a standard Select on POST and send its value, ce1521d8-cffd-11ee-baef-477d625ddaa8 for "Label A", or ce2e4046-cffd-11ee-baef-93b6cbfb74ea for "Label B".

It's a bit troubling because the value of the vaadin-select component is correctly set - it's "just" not sent at all in FormData.

_ Again, tt might be that I expect too much of the library, though, and that I didn't find the piece of doc explaining that vaadin components don't work this way, or need extra configuration_

Minimal reproducible example

Standard html, loading all components:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vaadin Debug</title>

    <!-- include all vaadin core components -->
    <script type="module" src="/assets/vaadin-resources.js"></script>
    <link rel="stylesheet" href="/assets/styles/styles.css">
</head>

<body style="font-family: var(--lumo-font-family); color: var(--lumo-body-text-color); background-color: var(--lumo-base-color);"></body>

<div style="width:600px; margin: 0 auto" class="border border-contrast-80 border-primary bg-base rounded-l shadow-m">
    <div class="">
        <form id="myForm" name="object-form" action="/partials/object/Entity/0000" method="post">

            <vaadin-text-field id='vaadin-text-field' name='vaadin-text-field' label='vaadin-text-field'>
            </vaadin-text-field>

            <vaadin-select id='vaadin-select' name='vaadin-select' label='vaadin-select'>
            </vaadin-select>
            <script>
                select = document.querySelector('#vaadin-select');
                select.items = [
                    {  label: 'Label A', value: 'ce1521d8-cffd-11ee-baef-477d625ddaa8' },
                    {  label: 'Label B', value: 'ce2e4046-cffd-11ee-baef-93b6cbfb74ea' },
                    {  label: 'Label C', value: '45de575e-ea28-11ee-8718-df0dd9251f5f' }
                ];
                select.value = 'ce1521d8-cffd-11ee-baef-477d625ddaa8';
                console.log("vaadin-select updated")                    
            </script>

            <button type="submit">Save</button>
        </form>
        <script>
            document.getElementById('myForm').addEventListener('submit', function (event) {
                event.preventDefault(); // Stop the form from submitting

                console.log("Values of elements");
                console.log('vaadin-text-field:', document.querySelector('#vaadin-text-field').value);
                console.log('vaadin-select:', document.querySelector('#vaadin-select').value);
                console.log('vaadin-radio-group:', document.querySelector('#vaadin-radio-group').value);

                console.log("Form values");
                const formData = new FormData(this);
                for (let [key, value] of formData.entries()) {
                    console.log(key, value);
                }
            });
        </script>
    </div>
</div>
</body>
</html>

Button Save displays this in console:

Values of elements
vaadin-text-field: MyText          // as expected
vaadin-select: ce1521d8-cffd-11ee-baef-477d625ddaa8          // as expected

Form values
vaadin-text-field MyText          // as expected
// vaadin-select missing from formdata - quite unexpected

Steps to reproduce

  1. Install this code
  2. Click Save
  3. Watch the values in the console (or in the Payload tab of Network debugger)

Environment

Vaadin version(s): Latest vaadin 24.3.10 components
Environment: Bun / Elysia behind a Caddy proxy - node equivalent
OS: ubuntu 24.04

Browsers

Chrome, Firefox
@fredt34 fredt34 mentioned this issue May 3, 2024
Closed
@fredt34
Copy link
Author

fredt34 commented May 3, 2024

I posted this issue on StackOverflow but just got what looked like an opinion.

@web-padawan web-padawan added enhancement New feature or request vaadin-select labels May 3, 2024
@web-padawan
Copy link
Member

The vaadin-select web component doesn't support form submission properly as it's not using <select> element.
Consider using formdata event to set value corresponding to vaadin-select manually as a workaround.

@fredt34
Copy link
Author

fredt34 commented May 3, 2024

OK thanks! Maybe these limitations should be clearer in the docs...

@fredt34 fredt34 closed this as completed May 3, 2024
@fredt34
Copy link
Author

fredt34 commented May 16, 2024 •
edited

I don't mean to be rude, but the main page for the components states they are "A set of high-quality standards based web components for enterprise web applications."

https://github.com/vaadin/web-components

I wouldn't call "standards based" the fact that value is not supported. This is quite misleading.

@web-padawan
Copy link
Member

Thank you for your feedback. The "standards based" means that Vaadin components are based on web components standards. I agree that not supporting form submission is an important missing feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request vaadin-select
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fredt34 @web-padawan