[SOLVED] Select from UI Kit not working properly (label not showing, defaultSelect option not being selected and styles not showing)

As mentioned in Title I’m having trouble with UI Kit Select on Customfield Type Edit resource.
So first problem is that I have label in variable ( even with constant string ) there is no label displayed.
Second problem is that I can’t pre-select the value, that’s already saved in the customfield.
I also tried adding defaultSelected only to the one, that I want to select… didn’t help
And the last one, there are no styles. It has default html select appearance.
code:

  const [label, _] = useState("Select Value:");

<FormSection>
  {error && <SectionMessage appearance="error">{error}</SectionMessage>}
  <Select name="selectedOption" label={label}>
    {rawOptions.map(rawOption => {
      const props = {
        label: rawOption.text,
        value: !rawOption.id ? "" : JSON.stringify(rawOption),
        defaultSelected: rawOption.id === extensionData?.fieldValue?.id
      }
      return (
        <Option {...props} />
      )
  })}
  </Select>
</FormSection>

on Create Issue it is the same no-styled default html select.

I can’t find FormSection in the Forge docs, is that a component you created yourself?

I mention it because I’m wondering if there is any reason you aren’t using CustomFieldEdit as the root element?

Well, that came with the app. I made jira-customfield-type custom UI forge app and whole structure for both Configuration and Edit resources was Form > FormSection > Field > TextField.
In Edit Screen I need Select so I changed it to Form > FormSection > Select. I thought even though I have custom UI app I am supposed to use UI Kit Components ( https://developer.atlassian.com/platform/forge/ui-kit-components/ ). Also every other Component ( Text, Form, TextField, … ) works just fine, only Select is not behaving.

Found the problem, the Components I thought were from UI Kit they were from @atlaskit/form. They have same names but different imports which I didn’t notice. Thanks for help.

1 Like