Text field is unusable when placed inside a radio group

[gabrielBusuioc]

Describe the bug

When placing a tag of type <vscode-text-field> inside a tag of type <vscode-radio-group>, the text field will lose its focus whenever clicked upon, thus making it unusable.

Code sample:

 <vscode-radio-group orientation="vertical">
      <label slot="label">What meals do you prefer?</label>
      <vscode-radio>Pasta</vscode-radio>
      <vscode-radio>Pizza</vscode-radio>
      <vscode-radio>Others... </vscode-radio> <vscode-text-field placeholder="Fish, Burgers...">ss</vscode-text-field>
</vscode-radio-group>

Desktop (please complete the following information):

• OS Version: Ubuntu 22.04.2 LTS
• Toolkit Version: v1.2.2

[hawkticehurst]

Hey @gabrielBusuioc! Could you provide a bit more information on what the issue you're seeing is? In particular, what does it mean that "the text field will lose focus whenever clicked upon"?

I ask because I tried to reproduce this issue and whenever I click on the text field it focuses and remains in focus until clicked away, which is all correct behavior as far as I can tell.

Extra note:

Not sure if this might be contributing to this issue or not, but as a heads up there's an issue with your sample code. There is a known issue where vscode-radio elements will not be correctly selected on the first interaction unless you explicitly add unique value attributes to each radio element. Like so:

<vscode-radio-group orientation="vertical">
  <label slot="label">What meals do you prefer?</label>
  <vscode-radio value="pasta">Pasta</vscode-radio> <!-- Note `value` attribute -->
  <vscode-radio value="pizza">Pizza</vscode-radio> <!-- Note `value` attribute -->
  <vscode-radio value="other">Others...</vscode-radio> <!-- Note `value` attribute -->
  <vscode-text-field placeholder="Fish, Burgers...">ss</vscode-text-field>
</vscode-radio-group>

[hawkticehurst]

At a higher level, I'm also curious about what your use case is for putting a text field inside a radio group. I can't say I've seen anyone try that before, so I'd love to know more about what you're hoping to accomplish.

[gabrielBusuioc]

Hey @hawkticehurst,
I've tried using the sample with unique values for every vscode-radio. It still fails to work.
I'm also attaching a GIF that exemplifies the behavior. Basically, whenever I click the text field, it will just lose its focus right away:

Regarding the use case, I just want to achieve a form-like radio group that will allow one to give input other than the ones specified. This is a basic HTML example that would highlight what I am trying to do here.

Please let me know if you need additional input from me.

[hawkticehurst]

Ahhh nice, I totally see what you're going for now. Thank you for clarifying!

Also good to know that adding values to the radios didn't change anything.

As for the focus issue, I'm still unable to reproduce the issue you've shown in the gif you shared (thank you btw!) –– could you create and share a small reproduction of the issue so I can see more details of what you're doing?

[gabrielBusuioc]

Hi,

I've attached a zip file that contains the source code for an extension where this issue is reproducible.
It's just a copy-paste of this extension sample where I added the previously-provided example.

To run the extension just follow the steps from the readme file.

Here is some additional information that might be useful for reproducing this issue:
VS Code Version: 1.81.1
Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794
Date: 2023-08-09T22:18:39.991Z
Electron: 22.3.18
ElectronBuildId: 22689846
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Linux x64 5.15.0-86-generic

Hope it helps :D

radioGroupIssueSample.zip

[gabrielBusuioc]

Hi @hawkticehurst,

Were you able to reproduce the issue?
Is there something I can do to help?

[hawkticehurst]

Hey @gabrielBusuioc, apologies for the radio silence!

I split my time between maintaining the toolkit and a handful of other projects at Microsoft so I usually only have a few days a month where I can dedicate my full attention to toolkit issues before I have to move on to the next thing.

I'm still deep in the weeds on other projects but I at least wanted to say hi, that I haven't forgotten about this issue, and will return to it soon-ish.. 😅

With that said, if you're open to publishing your sample to a github repo and sending me the link (versus using a ZIP file) that would actually be really helpful. I won't be able to do a proper debugging session for a while but I can likely review the code (via GitHub's UI) if/when I find myself with some free pockets of time over the next couple of weeks and might (??) be able provide some suggestions/answers sooner versus later.

[gabrielBusuioc]

Hi @hawkticehurst,

I totally understand that time is not on your side. It`s the same for me as well these days xD. Really appreciate that you took the time to get back to me!

I published the sample on this github repo. Hope it helps!

[hawkticehurst]

Thanks @gabrielBusuioc!

From a quick pass can you also make sure to include your .vscode folder in the repo? That folder contains files that will tell VS Code how to correctly build/run the extension (aka it's how VS Code knows what to run when F5 is pressed).

[gabrielBusuioc]

Hi @hawkticehurst,

My mistake... I forgot to add the hidden files :D
Now it should work.