1

I have a React app with Fluent-UI 8 set up using npm install @fluentui/react according to the documents from Microsoft.

When I try their combobox or dropdown components, the dropdown list doesn't appear when clicked on it. I use their examples from the docs, which compiles without errors. But none of their examples work out of the box, and no other information is provided.

The problem is that the dropdown list does not appear when clicked on. Not in Edge, not in Firefox. When I check the elements on the page, I do not see the html elements with the list items, although I can cycle through them with the arrow keys. The list appears from the side when the window is tablet format, and setting ResponsiveMode did nothing. Whith a normal screen however, nothing is displaying, and no onchange events are fired.

This is my code for the dropdown:

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

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

const DropdownControlledMultiExampleOptions = [
  { key: 'fruitsHeader', text: 'Spooler status', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'grape', text: 'Grape' },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' },
];

export const DropdownList: React.FunctionComponent = () => { 
  const stackTokens: IStackTokens = { childrenGap: 20 };
  return (
    <Stack tokens={stackTokens}>
      <Dropdown
        placeholder="Select an option"
        label="Disabled responsive"
        options={DropdownControlledMultiExampleOptions}
        styles={dropdownStyles}
        responsiveMode={ResponsiveMode.unknown}
      />
          <Dropdown
        placeholder="Select an option"
        label="Responsive with panel"
        options={DropdownControlledMultiExampleOptions}
        styles={dropdownStyles}
      />
    </Stack>
  );
};

Which I load in my app.tsx

function App() {
  return (
    <div className="App">
      <DropdownList/>

    </div>
  );
}

Does anyone have an idea how I can get this to work? Or what is causing this?

EDIT and possible solution: It seems that removing the <React.Strict> tags in index.tsx does the job. Don't know why, but then the Fluid-UI controls work fine.

CMorgan
  • 645
  • 2
  • 11
  • 33
  • Not sure why their documentation is so bad, but FWIW what I always end up doing is, instead of clicking "Show Code" in their docs, click "Export to CodePen". You'll get a working example you can copy over, and then you just have to fix the imports since they do some goofy stuff to make it work on codepen, but it's a much smoother experience than trying to get the code from their website to work – dave Jul 19 '22 at 20:21
  • Wondering the same with regards to their docs, but I tried copy it from codepen and vice versa, and there it works, It must be something else that either I'm missing or the npm install does different then the react – CMorgan Jul 19 '22 at 20:24
  • Do you have it all wrapped in the `ThemeProvider`? – dave Jul 19 '22 at 20:31
  • also if it's a new app, I've found that v9 is much easier to use than v8 https://react.fluentui.dev – dave Jul 19 '22 at 20:34
  • Provided code works perfectly fine. You can't see list of items inside DOM because the list renders inside callout component after on click event. Can you check Browser Console is there any error? It's really weird behavior to have responsive view and not the default one... – Marko Savic Jul 20 '22 at 07:59
  • The problem disappears if I remove the tags from the index.tsx... – CMorgan Jul 20 '22 at 09:24
  • @MarkoSavic no errors in the console. – CMorgan Jul 20 '22 at 09:31
  • I'm hitting the same problem. Fluent seems extremely unreliable. I'm running in Chrome. Sometimes clicking on the dropdown button works and expands, sometimes it doesn't and just selects other adjacent text on the page. – Mike S Feb 16 '23 at 05:46
  • @MikeS Does remove the tags improve the situation for you? It did for me, but since it has been a while since I worked on this specific project, I don't know if any improvements where made in the FluentUI apis. – CMorgan Apr 12 '23 at 07:05

0 Answers0