innerProps for menuList not applied.

[supersheen]

I am trying to remove the top and bottom white margin between menu and menuList, but seems the innerProp is not applied, here is example. Can you have a look and let me know why? thanks.
https://codesandbox.io/s/react-select-v3-sandbox-forked-xe8ms?file=/example.js

[Rall3n]

@supersheen Unfortunately the example does not show what you are trying to accomplish / proof. Could you perhaps update the example?

[supersheen]

Thanks your reponse @Rall3n yes the example doesn't work, I am trying to figure it out. Here <components.MenuList {...props} innerProps={Object.assign({}, props.innerProps, {'data-role': 'menuList'})} /> I am hoping to add an attribute data-role: menuList in output to get rid of the top and bottom white margin using padding-bottom: 0; padding-top: 0; but it's not working. I checked source code, seems innerProps is not assigned for menuList? menu is working fine for me.

[supersheen]

I mean the white line I mark it in black, by default it's 4px.

[Rall3n]

@supersheen You can override the style using the styling framework.

Removing the styles for paddingTop and paddingBottom from the menuList styles should result in what you want to achieve.

<Select
  styles={{
    menuList: ({ paddingTop, paddingBottom, ...baseStyles }, props) => baseStyles
  }}
/>

[supersheen]

thanks @Rall3n, I thought about that. Does it mean menuList doesn't support innerProp? I also need to add other none style props like data-testId.

[ebonow]

@supersheen I wanted to revisit your question as I wasn't sure it was completely resolved. @Rall3n seems to have already answered your concern on styling the component.

It seems that MenuList is unique in that it does not spread innerProps into the element as you can see here

What you would have to do is either add a parent container:

const MenuList = ({ children, ...props }) => <components.MenuList {{...props}}><div data-role="menuList">{children}</div></components.MenuList>

Or create your own MenuList if you didn't want to risk introducing new DOM elements:

const MenuList = props => {
const { children, className, cx, getStyles, isMulti, innerRef } = props;
  return (
    <div
      css={getStyles('menuList', props)}
      className={cx(
        {
          'menu-list': true,
          'menu-list--is-multi': isMulti,
        },
        className
      )}
      ref={innerRef}
      data-role="menuList"
    >
      {children}
    </div>
  );

I am not quite sure why innerProps is treated differently here vs other components and will look into getting a response so we can have better clarity if it's a bug or by design.

[bpGusar]

Hi mates. Where I can find types for this list of props?

const { children, className, cx, getStyles, isMulti, innerRef } = props;

[Methuselah96]

MenuListProps:

react-select/packages/react-select/src/components/Menu.tsx

Lines 379 to 394 in 3d33e7d

	export interface MenuListProps<
	Option extends OptionBase = OptionBase,
	IsMulti extends boolean = boolean,
	Group extends GroupBase<Option> = GroupBase<Option>
	> extends CommonPropsAndClassName<Option, IsMulti, Group> {
	/** Set the max height of the Menu component */
	maxHeight: number;
	/** The children to be rendered. */
	children: ReactNode;
	/** Inner ref to DOM ReactNode */
	innerRef: RefCallback<HTMLDivElement>;
	/** The currently focused option */
	focusedOption: Option;
	/** Props to be passed to the menu-list wrapper. */
	innerProps: JSX.IntrinsicElements['div'];
	}

Which extends CommonProps:

react-select/packages/react-select/src/types.ts

Lines 80 to 114 in 3d33e7d

	export interface CommonProps<
	Option extends OptionBase,
	IsMulti extends boolean,
	Group extends GroupBase<Option>
	> {
	clearValue: () => void;
	cx: CX;
	/**
	Get the styles of a particular part of the select. Pass in the name of the
	property as the first argument, and the current props as the second argument.
	See the `styles` object for the properties available.
	*/
	getStyles: GetStyles<Option, IsMulti, Group>;
	getValue: () => Options<Option>;
	hasValue: boolean;
	isMulti: boolean;
	isRtl: boolean;
	options: OptionsOrGroups<Option, Group>;
	selectOption: (newValue: Option) => void;
	selectProps: Props<Option, IsMulti, Group>;
	setValue: (
	newValue: OnChangeValue<Option, IsMulti>,
	action: SetValueAction,
	option: Option
	) => void;
	theme: Theme;
	}
	export interface CommonPropsAndClassName<
	Option extends OptionBase,
	IsMulti extends boolean,
	Group extends GroupBase<Option>
	> extends CommonProps<Option, IsMulti, Group> {
	className?: string | undefined;
	}

[bpGusar]

@Methuselah96 Sorry mate, how can I use it in my case? I can't get it...

When I use it like this

interface IMenuListProps
  extends MenuListProps,
    CommonProps<Option, false, GroupProps<Option, false>> {}

const MenuList: React.FC<IMenuListProps> = (props) => {

I'm getting errors in Select component.

[Methuselah96]

Can you create a CodeSandbox with an example of what you're trying to do?