fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: <Menu> control issue

Open cloudwerkawsomesroka opened this issue 1 year ago • 0 comments

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 43.85 GB / 63.86 GB
  Browsers:
    Edge: Chromium (121.0.2277.98)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://github.com/aleksandrasroka/empty-spfx.git

Bug Description

Actual Behavior

Can't add below component to simple Spfx solution

<Menu> 
                      
                <MenuTrigger disableButtonEnhancement>
   
                <Button icon={<MoreHorizontalRegular />} aria-label="More" />
   
            </MenuTrigger>
   
                <MenuPopover>
   
                    <MenuList>
   
                        <MenuItem>New </MenuItem>
   
                    </MenuList>
   
                </MenuPopover>
   
            </Menu>

Menu control shows error (Logs section)

Expected Behavior

No error.

Installed packages

"dependencies": { "@fluentui/react-components": "^9.35.1", "@fluentui/react-icons": "^2.0.227", "@microsoft/sp-core-library": "1.18.2", "@microsoft/sp-lodash-subset": "1.18.2", "@microsoft/sp-property-pane": "1.18.2", "@microsoft/sp-webpart-base": "1.18.2", "@pnp/graph": "^3.22.0", "@pnp/logging": "^3.22.0", "@pnp/sp": "^3.22.0", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "devDependencies": { "@microsoft/rush-stack-compiler-4.7": "0.1.0", "@microsoft/sp-build-web": "1.18.2", "@microsoft/sp-module-interfaces": "1.18.2", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^8.12.0", "gulp": "4.0.2", "prettier": "^3.2.5", "tslint-config-prettier": "^1.18.0", "typescript": "4.7.4" }

Logs

Type '{ children: Element[]; }' is not assignable to type '{ children: Element | [Element, Element]; hoverDelay?: number | undefined; inline?: boolean | undefined; onOpenChange?: ((e: MouseEvent | React.MouseEvent<...> | KeyboardEvent<...> | TouchEvent, data: MenuOpenChangeData) => void) | undefined; ... 6 more ...; closeOnScroll?: boolean | undefined; }'.
  Types of property 'children' are incompatible.
    Type 'Element[]' is not assignable to type 'Element | [Element, Element]'.
      Type 'Element[]' is not assignable to type '[Element, Element]'.
        Target requires 2 element(s) but source may have fewer.ts(2322)

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] The provided reproduction is a minimal reproducible example of the bug.

cloudwerkawsomesroka avatar Feb 16 '24 14:02 cloudwerkawsomesroka