Using Select Component in sceneReactObject to Manage Custom Variables

[ysl0628]

I am using sceneReactObject as a sceneFlexItem, where the component of sceneReactObject extends the Select component from grafana/UI.

Can I set a variable created by customVariable to sceneFlexItem and use Select's onChange to implement the variable's setState?

const variable = new CustomVariable({
  name: 'labels',
  options: [
    { label: 'cluster', value: 'cluster' },
    { label: 'level', value: 'level' },
    { label: 'pod', value: 'pod' },
  ],
  value: 'cluster',
});

const labelPickerItem = new SceneFlexItem({
    $variables: new SceneVariableSet({ variables: [variable] }),
    width: '240px',
    body: LabelPickerScene({
      label: 'Label',
      onChange: (value) => handleLabelChange(value),
      value: variable.state.value,
      options: variable.state.options,
    }),
  });

if there are any issues with my approach, please provide suggestions for improvement.

[torkelo]

@ysl0628 that won't work.

To implement a custom variable value selector / change, view the how the default implementation works: https://github.com/grafana/scenes/blob/main/packages/scenes/src/variables/components/VariableValueSelectors.tsx#L40