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.

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!

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

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"

Maybe portaling option?

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.

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

Yeah, I'll make a Pr for it.

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) .

@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.

Ok. Thank you