Why does the select from UI Kit 2 not work like documented

Forge
,
1

The usage of the UI Kit 2 version of the Select component does not work as documented in here. I have tested this in my app, but also for a completely newly created hello world app, which worked otherwise. As soon as the component is used, the plugin just does not render. I know breaking changes have to be expected but how come this is not documented at all, or at least not findable somewhere?

2

Hi @lprattes
Welcome to our Community.
Have you imported the component to your codes? If yes, please show us your screenshot of your main code logic.

import { Select } from "@forge/react";

Thanks,
YY1

1 Like
3 
import React from 'react';
import ForgeReconciler, { Text} from '@forge/react';
import { Select } from '@forge/react';

const App = () => {
  return (
    <Select
      label="With a defaultSelected"
      name="milestone"
      onChange={({ label, value }) => console.log(label, value)}
    >
      <Option defaultSelected label="Milestone 1" value="one" />
      <Option label="Milestone 2" value="two" />
      <Option label="Milestone 3" value="three" />
    </Select>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

That is about it, just tried to make it as barebones as possible, but i also tried other ways and i could not get it to work.

1 Like
5

Oh, you may be using the wrong UI Kit version. Please try UI KIt 10:
https://developer.atlassian.com/platform/forge/ui-kit/components/select/
BTW, you’re using version 9.

1 Like
6

Okay thanks, that is not easy to find/separate. But another question, why does this

import React from 'react';
import ForgeReconciler, { Text} from '@forge/react';
import { Select } from '@forge/react';

const App = () => {
  return (
    <Select
      appearance="default"
      options={[
        { label: 'Apple', value: 'a' },
        { label: 'Banana', value: 'b' },
      ]}
    />
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

not render any options when clicking on it, as pictured here:

image
image793×85 1.15 KB

the component seems broken or am i doing somethin fundamentally wrong?

7

alright for some reason a toilet break fixed it thanks nevertheless

8

Happy to hear you’re successful finally.