Single Select combobox improvements

[mikeburgh]

For the combo box option, is it possible to enforce the entered value must match a provided value when using the native form validation.

Also, is it possible to get the ability to render an icon at the start of each value.

[bendera]

For the combo box option, is it possible to enforce the entered value must match a provided value when using the native form validation.

Currently, in combobox mode, it allows committing an invalid value that is not present in the list. In this case, the value will be an empty string, and the selectedIndex will be -1. This is definitely a bug. For validation, you can use the required attribute, which is the only applicable validation option for a select element. (I've just realized the validation is also buggy.)

Also, is it possible to get the ability to render an icon at the start of each value.

With the current implementation, it's only feasible with codicons. Would that be acceptable for you?

[mikeburgh]

Thanks, codicons will work.. I think I should be able to switch those for other icons easily enough post render if the need arises.

[bendera]

I've realized with the current implementation the performance is drastically degrading if icons are rendered in the options. It will be complex task. I can't estimate when it will be finished.

[mikeburgh]

No worries, I am getting around to seeing if I can patch it in after the render.. if I can I will close this as that will take care of my needs.

[Penguinang]

For the combo box option, is it possible to enforce the entered value must match a provided value when using the native form validation.

Currently, in combobox mode, it allows committing an invalid value that is not present in the list. In this case, the value will be an empty string, and the selectedIndex will be -1. This is definitely a bug. For validation, you can use the required attribute, which is the only applicable validation option for a select element. (I've just realized the validation is also buggy.)

Also, is it possible to get the ability to render an icon at the start of each value.

With the current implementation, it's only feasible with codicons. Would that be acceptable for you?

Is it possible to input an custom value which is not pre-defined, and final result is not an empty value, but the inputed value?

[bendera]

@Penguinang There is a creatable property, doesn't that work for you? The relevant part of the documentation is incomplete, I should fix it.

[dankeboy36]

it's only feasible with codicons. Would that be acceptable for you?

Thanks, codicons will work.

Hello, I could not get codicon into the option. Is it supported?

https://github.com/user-attachments/assets/c745ca99-2bc1-4101-ac6c-a4233a4f2357

This is what I tried. Thank you!

import {
  VscodeIcon,
  VscodeOption,
  VscodeSingleSelect,
} from '@vscode-elements/react-elements'
import { createRoot } from 'react-dom/client'

if (
  typeof document !== 'undefined' &&
  !document.getElementById('vscode-codicon-stylesheet')
) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = 'https://microsoft.github.io/vscode-codicons/dist/codicon.css'
  link.id = 'vscode-codicon-stylesheet'
  document.head.appendChild(link)
}

if (import.meta.env.DEV) {
  await import('@vscode-elements/webview-playground')
}

function TestApp() {
  return (
    <div>
      {import.meta.env.DEV ? <vscode-dev-toolbar></vscode-dev-toolbar> : null}
      <div
        style={{ padding: '20px', flexDirection: 'column', display: 'flex' }}
      >
        <h1>VS Code Elements Test</h1>

        {/* Test codicon works */}
        <VscodeIcon name="account" />

        {/* Test single select with options */}
        <VscodeSingleSelect
          name="test-select"
          style={{ minWidth: '300px', marginTop: '20px' }}
        >
          <VscodeOption value="">Select an option</VscodeOption>
          <VscodeOption value="option1">Option 1 (no icon)</VscodeOption>
          <VscodeOption value="option2">
            <VscodeIcon name="check" />
            <span>Option 2 (with check icon)</span>
          </VscodeOption>
          <VscodeOption value="option3">
            <VscodeIcon name="star" />
            <span>Option 3 (with star icon)</span>
          </VscodeOption>
        </VscodeSingleSelect>

        <p>This tests whether codicons work inside VscodeOption elements.</p>
      </div>
    </div>
  )
}

const container = document.getElementById('root')
if (container) {
  const root = createRoot(container)
  root.render(<TestApp />)
}