Events not consistently passed to wrapped React components

Describe the bug

Howdy! I’m using @microsoft/fast-react-wrapper to convert these web-components into React components. I’ve noticed that, for some components, event handler props like onInput and onClick work totally fine, but for others, these props don’t seem to do anything. For example, say I have the following wrapped React components 👇

import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
import {
  vsCodeButton,
  vsCodeDropdown,
  vsCodeOption,
  vsCodeTextField,
} from '@vscode/webview-ui-toolkit';

const { wrap } = provideReactWrapper(React, provideFASTDesignSystem());

const VSCodeButton = wrap(vsCodeButton());
const VSCodeDropdown = wrap(vsCodeDropdown());
const VSCodeOption = wrap(vsCodeOption());
const VSCodeTextField = wrap(vsCodeTextField());

I’m able to use the onClick prop of the VSCodeButton component without trouble.

<VSCodeButton
  onClick={() => {
    console.log('works! ✅');
  }}
>
  Click Me
</VSCodeButton>

Likewise, the onInput prop of the VSCodeTextField component works just fine.

<VSCodeTextField
  onInput={(e) => {
    console.log('i see this logged ✅');
  }}
/>

However, the onChange prop of VSCodeDropdown never seems to fire.

<VSCodeDropdown
  onChange={(e) => {
    console.log('never works ❌');
  }}
>
  <VSCodeOption>Value #1</VSCodeOption>
  <VSCodeOption>Value #2</VSCodeOption>
  <VSCodeOption>Value #3</VSCodeOption>
</VSCodeDropdown>

Additionally, I’ve noticed that the prop types for the generated components aren’t totally right. Here, appearance should be a valid prop, but TS throws an error.

Note that this doesn’t happen for the wrapped fastButton component.

import { fastButton, provideFASTDesignSystem } from '@microsoft/fast-components';

const { wrap } = provideReactWrapper(React, provideFASTDesignSystem());

const FastButton = wrap(fastButton());

Expected behavior

I’d expect these props to work consistently across the generated React components, but it’s quite likely that I’m misunderstand the respective APIs of these components.

Do you have any idea what might be going on?

Desktop (please complete the following information):

• Toolkit Version: 0.8.3

[hawkticehurst]

Thanks, @mattrothenberg!

Some initial quick thoughts/questions are if this lack of prop behavior is showing up in more than the dropdown? If it is only the dropdown, I wonder if this could be related to #181 and subsequently this issue on FAST. 🧐 (cc @chrisdholt for thoughts)

Also weird that the type information for the appearance attribute is not showing up either. I can dive into that more once I start up on the React sample extension work in a few days, but again going to cc @chrisdholt in case he has some immediate thoughts/insights into what might be happening.

[hawkticehurst]

Ooh, I will happily take you up on that offer! Thank you!

I have some low-hanging issues/bugs that I’m trying to tackle this week, but I’ll set up a time to chat sometime next week once I’m a bit more started up on the React work.