React-select: Footer in custom MenuList

[archansel]

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.

[ahbagheri]

A quick workaround is to bind "onTouchStart" event to the the "onClick" event.

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.

[ebonow]

Greetings,

One of the reasons this is happening is because of how the existing mouse and touch events are bound.

  onTouchEnd = (event: TouchEvent) => {
    if (this.userIsDragging) return;

    // close the menu if the user taps outside
    // we're checking on event.target here instead of event.currentTarget, because we want to assert information
    // on events on child elements, not the document (which we've attached this handler to).
    if (
      this.controlRef &&
      !this.controlRef.contains(event.target) &&
      this.menuListRef &&
      !this.menuListRef.contains(event.target)
    ) {
      this.blurInput();
    }
   // ...
  };

Since the footer is not in the MenuList in both your examples @archansel and @iseredov , the blur event is immediately triggered.

The reason why the suggestion by @ahbagheri would likely work is that the onTouchStart event would work is that it fires first, but unfortunately would likely trigger when trying to drag and scroll.

Perhaps a better solution for this would be to check that the event.target is contained in the menuRef instead of the menuListRef though I don't believe such a thing as a menuRef exists at current time.