Rmwc: Enhanced Select options are clipped inside dialog

[peterkle]

• What RMWC Version are you using [major.minor.patch]:
  6.0.14

• Name your build system [Webpack, Rollup...]:
  Parcel

• Describe the bug with as much detail as possible:
  With <Select enhanced />, the options are clipped if the parent container is not large enough. This is especially apparent when inside the <Dialog> component, which may be a somewhat common use case.

• What happened, and what was supposed to happen:
  The selection options are clipped. We want to see the entire list.

Sandbox: https://codesandbox.io/s/rmwc-typescript-sandbox-mlcnm?fontsize=14&hidenavigation=1&theme=dark

[nicholaschiang]

Yeah @peterkle you should follow the documentation's instructions to render your Select's MenuSurface through a portal:

  // Somewhere at the top level of your app
  // Render the RMWC Portal
  // You only have to do this once
  import React from 'react';
  import { Portal } from '@rmwc/base';

  export default function App() {
    return (
      <div>
        ...
        <Portal />
      </div>
    )
  }

And then render your MenuSurface through the portal:

function Example() {
  const [renderToPortal, setRenderToPortal] = React.useState(true);
  const options = ['Cookies', 'Pizza', 'Icecream'];
  return (
    <>
      <div
        style={{
          marginBottom: '10rem',
          height: '3.5rem',
          overflow: 'hidden'
        }}
      >
        <MenuSurfaceAnchor>
          <Button raised>Open Menu</Button>
          <Menu open renderToPortal={renderToPortal}>
            {options.map(o => (
              <MenuItem key={o}>{o}</MenuItem>
            ))}
          </Menu>
        </MenuSurfaceAnchor>
      </div>
      <Checkbox
        checked={renderToPortal}
        onChange={evt => setRenderToPortal(evt.currentTarget.checked)}
        label="renderToPortal"
      />
    </>
  );
}

Does that help @peterkle?

Though @jamesmfriedman I'm still not sure how to do this with the Select component (without creating it yourself using a composition of a controlled readOnly TextField and a Menu rendered through that top-level Portal).

[jamesmfriedman]

Not sure about your question at the end there @nicholaschiang. The props signature of an enhanced select (the kind that would need "renderToPortal" is either a boolean OR menu props.

<Select enhanced={{renderToPortal: true}} />

[jamesmfriedman]

But @peterkle @nicholaschiang is correct with his answer. See the example above ^

[MiK546]

I was also having my menus clipping and tried the to render the opened menu to a portal using

<Select enhanced={{renderToPortal: true}} />

That doesn't seem to work though. The menu is still rendered as a sibling of the enhanced select menu itself.

Putting the renderToPortal to the props of the <Select/> element itself seems to partially work.

<Select enhanced renderToPortal />

The menu is rendered correctly to a Portal added to the application. But now the select menu functionality breaks completely. The current value is not rendered, items can't be selected from the menu and in some cases setting a value prop crashes the application.

I forked the original sandbox to demonstrate this https://codesandbox.io/s/rmwc-typescript-sandbox-4v5to

[mockingbird87]

Have you been able to find a fix/workaround for this issue?

I've tried substituting the <Select> component for a <Menu> component with renderToPortal={true}. This solved the clipping issue and the menu rendered nicely in the Portal but the onSelect and onClose events get killed :(

My current workaround is to add an onClick event handler to the <MenuItem>'s, not the cleanest solution but it works!

[nicholaschiang]

Hey @jamesmfriedman it doesn't look like you're spreading the enhanced prop at all:

        // Line 417 of `src/select/select/index.tsx`
        {enhanced && (
          <EnhancedMenu
            {...rest}
            anchorCorner="bottomStart"
            defaultValue={defaultValue}
            placeholder={placeholder}
            open={menuOpen}
            onClose={handleMenuClosed}
            onOpen={handleMenuOpened}
            onSelect={(evt: MenuOnSelectEventT) => {
              handleMenuSelected(evt.detail.index);
            }}
            selectOptions={selectOptions}
            value={value}
            selectedIndex={selectedIndex}
            menuApiRef={setMenu}
            children={children}
          />
        )}

I just opened this PR to do just that (spread the enhanced prop instead of rest to the EnhancedMenu).

So @MiK546 that's why adding the renderToPortal prop on the Select itself worked (because right now, @jamesmfriedman is spreading rest (the rest of the props) to the Menu instead of spreading the enhanced prop like he should).