Add Field modal when editing a content type schema needs resizing.

[flipmcf]

Describe the bug The "Add Field" modal when editing a content type schema is cut off - Select box is too large for window.

To Reproduce From the control panel -> content types (localhost:3000/controlpanel/dexterity-types )

Edit the schema of any content type (three dots at the end of the row, select 'schema')

Click "select" in the type drop-down.

Note that the list is cut off, and the user must scroll the main window to see the last few choices.

Expected behavior The main modal shouldn't scroll. Only the dropdown should scroll. You shouldn't have to use 2 scroll bars to get to the "yes / no" field choice.

Screenshots

Software (please complete the following information):

• OS: Ubuntu 20.04
• Browser Chrome Version 107.0.5304.121 (Official Build) (64-bit) Volto 16.3.0 Plone 6.0.0rc2 plone.restapi 8.32.4 CMF 2.6.0 Zope 5.7 Python 3.8.10 (default, Jun 22 2022, 20:18:18) [GCC 9.4.0] PIL 9.3.0 (Pillow) Add-ons @plone/volto-slate 16.3.0 @eeacms/volto-accordion-block 6.0.0 @kitconcept/volto-blocks-grid 5.2.0 @kitconcept/volto-slider-block 4.0.0 @eeacms/volto-matomo 3.0.1

[MAX-786]

Hello @flipmcf 😊, I think somehow we can reduce the height of the internal (select) component so it fits with an outer view. If you haven't started working on this, I would like to work on this too.

[JeffersonBledsoe]

I find this behaviour happens in a few places in Volto. The dropdown always appears to display below the cursor and is contained within the parent of whatever triggered the dropdown, causing you have to scroll the parent to be able to then scroll the dropdown to see the bottom of the list. Looking at the ReactSelect docs (which is what is used for the popups), it looks like there's a menuPlacement prop that we could use. It defaults to bottom but there's an auto value that seems to do the moving behaviour I'd like to see! Also has portal support for rendering it outside of the parent. Could be a useful PR!

[danalvrz]

I implemented the suggested change, by assigning the value auto to the prop menuPlacement in the SelectWidget component, but the issue seems to persist.

https://user-images.githubusercontent.com/89805481/207117409-5a5dfb4c-0f16-4cc9-8744-e12b05b75f64.mov

[victorchrollo14]

hey @flipmcf , @JeffersonBledsoe.

Adding a maxMenuHeight="10em" prop to the Select component in SelectWidget would fix the issue. But I'm not sure if it is a good fix, as the SelectWidget component is used in a lot of other components as well. And it would prevent those components from having the drop-down menu height of greater than 10em.

<Select
          id={`field-${id}`}
          key={choices}
          name={id}
          menuShouldScrollIntoView={false}
          isDisabled={disabled}
          isSearchable={true}
          className="react-select-container"
          classNamePrefix="react-select"
          isMulti={isMulti}
          options={options}
          styles={customSelectStyles}
          theme={selectTheme}
          maxMenuHeight="10em"
          menuPlacement="bottom"

https://github.com/plone/volto/assets/89346667/d7f11637-ccf0-40f2-98f1-70de949c05f5

[stevepiercy]

Maybe portaling option?

[victorchrollo14]

Yeah portalling options works as well. we can add menuPortalTarget={document.body} prop to the select component. and add

menuPortal: (base) => ({ ...base, zIndex: 9999 }), 

to customSelectStyles in /widgets/SelectStyling.jsx. This seems to be work fine and doesn't break things in other places the component is used in.

Screencast from 08-03-24 05:51:57 PM IST.webm

[stevepiercy]

@victorchrollo14 would you be willing to create a PR for this implementation? It looks good.

[victorchrollo14]

Yeah, I'll make a Pr for it.

[victorchrollo14]

hey @stevepiercy. I ran the tests using pnpm test. The SelectWidget test was failing, then there was an option to update the SelectWidget snapshots, and I updated it, and the test stopped failing. now I have changes in 4 files.

• SelectWidget.jsx
• SelectWidget.test.jsx.snap
• SelectStyling.jsx
• /packages/volto/news/4058.bugfix ( change log entry )

This is normal right?

I have run pnpm test and pnpm lint, Is there anything else to run before making the commit. should I run this one as well (https://6.docs.plone.org/volto/contributing/acceptance-tests.html) .

[stevepiercy]

@victorchrollo14 I'm not a Volto developer. I just do issue triage and documentation for Volto. I think you're on the right path and have satisfied most if not all requirements. When you create a PR, GitHub workflows will run and let you know if you missed anything.

[victorchrollo14]

Ok. Thank you