menu-button styling issues with emotion about reach-ui HOT 12 CLOSED

FYI, we have a duplicate issue that is still open dealing with this. I'm tracking the conversation there, but we are aware and working on this. We'll have a rewrite of MenuButton out (hopefully) in the next couple of weeks. #119

from reach-ui.

I'm still getting this error trying to do the same thing :(

TypeError: Cannot read property 'selectionIndex' of undefined

Tried just copy-pasting from the sandbox. Was this later reverted?

Edit: Yup. https://github.com/reach/reach-ui/blob/master/packages/menu-button/src/index.js#L326

import React, { useState } from "react"
import styled from "react-emotion"
import "@reach/menu-button/styles.css"
import {
  Menu as ReachMenu,
  MenuButton as ReachMenuButton,
  MenuList as ReachMenuList,
  MenuItem as ReachMenuItem,
} from "@reach/menu-button"

const Menu = styled(ReachMenu)``

const MenuButton = styled(ReachMenuButton)`
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 6px 10px;
`

const MenuList = styled(ReachMenuList)`
  background-color: red;
`

const MenuItem = styled(ReachMenuItem)`
  padding: 20px;
  &[data-selected] {
    color: red;
    background: white;
  }
`
const Test = () => {
  return (
    <Menu>
      <MenuButton>Actions</MenuButton>
      <MenuList>
        <MenuItem>Download</MenuItem>
        <MenuItem>Foo</MenuItem>
      </MenuList>
    </Menu>
  )
}

export default Test

from reach-ui.

Don't forget you'll want to style the selected state probably too :)

const MenuItem = styled(ReachMenuItem)`
  padding: 20px;
  &[data-selected] {
    color: red;
    background: white;
  }
`;

from reach-ui.

Ah shoot, I should have thought of this 😑

if (child.type === MenuItem || child.type === MenuLink) {

Gonna allow anything I guess.

from reach-ui.

https://codesandbox.io/s/8z3yln1x0l

from reach-ui.

awesome, thanks 🙌

from reach-ui.

Same issue. Using styled-components.

Interestingly documentation page provides an example of styling MenuItems by attribute from MenuList component

https://ui.reach.tech/styling/

let YourMenuList = styled(MenuList)`
  border: solid 2px black;
  background: black;
  color: red;
  > [data-reach-menu-item][data-selected] {
    background: red;
    color: white;
  }
`

from reach-ui.

I get this on the latest version. My higher-order component:

export default function withClassName(Component, extraClass) {
  const Wrapped = React.forwardRef(({ className, ...props }, ref) => {
    return <Component {...props} className={classnames(className, extraClass)} ref={ref} />
  })

  Wrapped.propTypes = {
    className: PropTypes.string,
  }

  Wrapped.defaultProps = {
    className: '',
  }

  Wrapped.displayName = `My${Component.displayName}`

  return Wrapped
}

This works:

import { Menu as ReachMenu } from '@reach/menu-button'
export const Menu = withClassName(ReachMenu, 'my-menu')

This doesn't:

import { MenuItem as ReachMenuItem } from '@reach/menu-button'
export const MenuItem = withClassName(ReachMenuItem, 'my-menu-item')

Specifically, state is undefined here.

from reach-ui.

Same here, MenuItem isn't working on styled-components yet. The regression started in v0.1.8, as a workaround, I downgraded to v0.1.7.

from reach-ui.

I am having this problem as well. Can we re-open this issue since it appears to have regressed?:
My installed version of @reach/menu-button is 0.3.0.

from reach-ui.

I'm also seeing this in my puppeteer tests specifically.

ui.getActionMenuButton().simulate('click'); // <-- simulating a click in puppeteer

from reach-ui.

Happy to see this update, thanks for all your work @chancestrickland!!

from reach-ui.