TextField: pattern is not checked after value is changed by JavaScript

[isc-bsaviano]

Consider the following element:

<vscode-textfield id="path" name="path" placeholder="/path" pattern="^(/.*)?$"></vscode-textfield>

When my Webview is restored after being hidden, I want to assign path.value to whatever the user had typed before the Webview was hidden. When I change the value, the pattern validation is not being re-run. According to the example on this page, it should be.

[bendera]

Thanks for the report, I'll investigate it.

[isc-bsaviano]

Thanks @bendera!

[bendera]

Fixed in the latest pre-release. Please check if it works.

npm i @vscode-elements/elements@next

[isc-bsaviano]

@bendera Thanks! I correctly see the red highlighting when I restore a invalid value. However, the invalid property on the element doesn't seem to be getting set properly. In JS, when I inspect path.invalid, it's always false. I am also still seeing an issue similar to #178, but in my case the dropdown options are "hidden" behind a Divider that's below the SingleSelect.

[bendera]

invalid is only a styling property intended for custom validation. When true, the component turns red, and that's its entire purpose. If you want to use native form validation (which is what's happening in your case), the component will automatically turn red and get the :invalid pseudo-class. In this case, you should use the checkValidity() function to check if the text field is valid.

I should update the documentation to make this clearer.

[isc-bsaviano]

Thanks for clarifying, checkValidity() works! Should I create a new issue for the dropdown behavior, or just follow #178?

[bendera]

Create a new one, thanks. But before that try this: https://vscode-elements.github.io/components/single-select/api/#Custom_CSS_Properties_--dropdown-z-index

[isc-bsaviano]

Changing the --dropdown-z-index using this CSS did not work, regardless of the value:

:root {
    --dropdown-z-index: 3;
}

[bendera]

Could you link your repo or make a reproducible example?

[isc-bsaviano]

For reference, here's a simple version of my HTML. The select options are added programmatically by JS on page load.

        <form id="form">
            <vscode-tabs id="panels" selected-index="0" aria-label="Method & Path, Headers, Query Parameters and Body">
            <vscode-tab-header id="methodPathTab">METHOD & PATH</vscode-tab-header>
            <vscode-tab-panel id="methodPathView">
              <section class="component-container">
                <section class="path-grid">
                  <section class="path-grid-container">
                    <vscode-single-select id="webApp" name="webApp" position="below"></vscode-single-select>
                  </section>
                  <section class="path-grid-container">
                    <vscode-textfield id="path" name="path" placeholder="/path" pattern="^/.*$" required></vscode-textfield>
                  </section>
                </section>
              </section>
            </vscode-tab-panel>
          </vscode-tabs>
        </form>
        <vscode-divider></vscode-divider>

The sections are necessary because there are other elements that I've removed to simplify this example. The SingleSelect and TextField are rendered next to each other:

[bendera]

AH, okay. You are right, it seems it's the same situation as #178

[isc-bsaviano]

Thanks for confirming. I'll close this as fixed and follow #178. 1.6.3-pre-1 didn't fix it for me.

[bendera]

The good news is that it can be fixed without changing the Tabs component. Just overwrite the default overflow rule of the TabPanel component:

vscode-tab-panel {
  overflow: visible;
}

[isc-bsaviano]

That works perfectly with 1.6.3-pre.1! Thank you so much for your help!