Footer in custom MenuList

I tried to make MenuList with footer. This is my current implementation

const MenuList = ({ children, selectProps, ...rest }) => {
  return (
    <div>
      <components.MenuList {...rest}>
        {children}
      </components.MenuList>
      {selectProps.footer && (
        <Footer {...rest}>
          {selectProps.footer}
        </Footer>
      )}
    </div>
  );
};

Footer is just simple component with styling. selectProps.footer is a clickable component (eg. button)

With this implementation, the footer is clickable but the option is not clickable. If I remove {...rest} from <Footer {...rest}> so it will become

const MenuList = ({ children, selectProps, ...rest }) => {
  return (
    <div>
      <components.MenuList {...rest}>
        {children}
      </components.MenuList>
      {selectProps.footer && (
        <Footer>
          {selectProps.footer}
        </Footer>
      )}
    </div>
  );
};

The option is clickable but the footer is not

These issues ONLY HAPPEN in touch device, it works perfectly in desktop (both option and footer are clickable). Is there any way to solve this for touch device?

[iseredov]

Have same problems. For example https://codesandbox.io/s/z2lj6z804p. If you try to click on the link on the touch device, then we will not go anywhere.

[kushniryb]

Greetings!

Stumbled upon the same issue. I’ve a custom Menu component that looks like this:

const MenuWithFooter = ({ children, selectProps, ...props }) => (
  <Components.Menu {...props}>
    {children}
    <div css={styles.footer}>{selectProps.renderFooter}</div>
  </Components.Menu>
);

renderFooter returns a button but the click is not being registered on mobile devices at all. That said, there are no issues on desktop.

Can someone suggest a workaround? I’ve tried upgrading to v4.3.1 but the issue persists.

Thanks in advance!