microsoft / vscode-webview-ui-toolkit

A component library for building webview-based extensions in Visual Studio Code.
MIT License
1.94k stars 130 forks source link

vscode-dropdown JS generated option with selected property not selected #332

Open WebFreak001 opened 2 years ago

WebFreak001 commented 2 years ago

Describe the bug

When generating vscode-option elements inside a vscode-dropdown and setting .selected = true; on one, it should be selected in the UI, but isn't (reset by an internal reset if no values are selected check)

To reproduce

<vscode-dropdown id="testdropdown"></vscode-dropdown>
<script>
    var dropdown = document.getElementById("testdropdown");
    for (var i = 1; i <= 3; i++)
    {
        var option = document.createElement("vscode-option");
        option.value = "v" + i;
        option.textContent = "Value " + i; // Value 1, Value 2, Value 3
        dropdown.appendChild(option);
        if (i == 2)
        {
            option.selected = true;
            // to fix bug uncomment this:
            // option.setAttribute("selected", "selected");
        }
    }
    // expected "Value 2" to be selected now
</script>

Expected behavior

Value 2 should be selected in the example, not Value 1

Desktop (please complete the following information):

Additional context

There is an internal check ran asynchronously, which resets the value if no option is selected. However it checks if the option is selected by checking if the attribute selected is set. (not the property)

The selected property of vscode-option should probably modify the DOM attribute.

It seems to be reset here:

toolkit.js line 8715

https://github.com/microsoft/fast/blob/eff36b2834b7709cc2281738007019fd264c3d31/packages/web-components/fast-foundation/src/listbox/listbox.ts#L537

alternatively it would be possible to also check the property instead of making the property modify the attribute, which is what combobox does:

https://github.com/microsoft/fast/blob/256fe07122c2838e6bf0edd639a539b9ceeaa1bf/packages/web-components/fast-foundation/src/combobox/combobox.ts#L546

WebFreak001 commented 2 years ago

(made an issue in FAST: https://github.com/microsoft/fast/issues/5583)

hawkticehurst commented 2 years ago

Thanks for the issue and for filing an issue with FAST as well! I'll keep an eye on the progress and merge any changes the FAST team adds once they are available!

CharlieGreenman commented 1 year ago

any work being done on this one? I just came across this issue today using the latest webview-ui-toolkit version

hawkticehurst commented 1 year ago

Unfortunately, no work on our end since this is an upstream issue within FAST

I've been checking the issue that @WebFreak001 filed with FAST every month or so for the last year but still haven't seen any movement on it

CharlieGreenman commented 1 year ago

That's pretty funny. I found a workaround via overriding component so it worked out in the end. Thank you again

hawkticehurst commented 1 year ago

Oh nice! Glad you were able to get yourself unblocked in that case 😁

ranitg commented 1 month ago

That's pretty funny. I found a workaround via overriding component so it worked out in the end. Thank you again

Hi, what was your workaround?