FluentUI dropdown not working in create-react-app

Question

I created a create-react-app project on my machine.

I ran npm i @fluentui/react in my project directory terminal to install the fluent ui package.

I have simple code to display a dropdown, with all the correct imports

import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '@fluentui/react/lib/Dropdown';

const dropdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: 300 },
};

const options: IDropdownOption[] = [
  { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange', disabled: true },
  { key: 'grape', text: 'Grape' },
  { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
  { key: 'vegetablesHeader', text: 'Vegetables', itemType: DropdownMenuItemType.Header },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' },
];

function App() {
  return (
    <div className="App">
     <Dropdown
        placeholder="Select an option"
        options={options}
        styles={dropdownStyles}
      />
    </div>
  );
}

What is getting displayed is a weird box with no clickable dropdown.

I did some research and I needed to import the icons so I added such code to my project.

import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons();

Now the dropdown displays the correct icon however nothing happens onclick of the icon.

Weirdly enough, when the screen size is tablet sized the dropdown will show up as context pane but will not appear in full screen mode

Ive searched SO and haven't found any answers to this. Any help would be appreciated!

score 0 · Answer 1 · answered Jul 05 '22 at 09:35

0

If I understand well you want to disable responsive mode:

import { ResponsiveMode } from '@fluentui/react'

<Dropdown
  ...
  responsiveMode={ResponsiveMode.unknown}
/>

Codepen working example.

answered Jul 05 '22 at 09:35

Marko Savic

2,159
2
14
27

no, the dropdown still isn't working onclick – Cameron Jul 05 '22 at 23:43
@cameron did you check console? Please provide codepen example – Marko Savic Jul 06 '22 at 00:35

score 0 · Answer 2 · answered Jul 19 '22 at 20:25

0

If you have <React.StrictMode> in your index.tsx, you can remove this and then it works (at least for me when I was having the same issue).

answered Jul 19 '22 at 20:25

CMorgan

645
2
11
33

FluentUI dropdown not working in create-react-app

2 Answers2