Fix the size of Select Menu in SelectWidget to prevent users from hav…

…ing to scroll both the main modal and dropdown menu to view the field choices (plone#4058).
victorchrollo14 · Mar 11, 2024 · 8eeb4da · 8eeb4da
1 parent 03b30f9
commit 8eeb4da
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 39 deletions.
diff --git a/packages/volto/news/4058.bugfix b/packages/volto/news/4058.bugfix
@@ -0,0 +1 @@
+Fix the size of Select Menu in SelectWidget to prevent users from having to scroll both the main modal and dropdown menu to view the field choices by adding a menuPortalTarget prop. @victorchrollo14
diff --git a/packages/volto/src/components/manage/Widgets/SelectStyling.jsx b/packages/volto/src/components/manage/Widgets/SelectStyling.jsx
@@ -109,6 +109,7 @@ export const selectTheme = (theme) => ({
 });
 
 export const customSelectStyles = {
+  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
   control: (styles, state) => ({
     ...styles,
     border: 'none',

diff --git a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx
@@ -233,6 +233,7 @@ class SelectWidget extends Component {
           options={options}
           styles={customSelectStyles}
           theme={selectTheme}
+          menuPortalTarget={document.body}
           components={{
             ...(options?.length > 25 && {
               MenuList,

diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap
@@ -70,7 +70,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"
-                      id="react-select-3-input"
+                      id="react-select-2-input"
                       spellcheck="false"
                       style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
                       tabindex="0"
@@ -113,44 +113,6 @@ exports[`No 'No value' option when default value is 0 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="react-select__menu css-109xf7j-menu"
-            >
-              <div
-                class="react-select__menu-list css-4ljt47-MenuList"
-              >
-                <div
-                  class="react-select__option react-select__option--is-focused react-select__option--is-selected css-zq2nh-option"
-                  id="react-select-3-option-0"
-                  tabindex="-1"
-                >
-                  <div>
-                    0
-                  </div>
-                  <svg
-                    class="icon"
-                    style="height: 20px; width: auto; fill: #007bc1;"
-                    viewBox=""
-                    xmlns=""
-                  />
-                </div>
-                <div
-                  class="react-select__option css-4khget-option"
-                  id="react-select-3-option-1"
-                  tabindex="-1"
-                >
-                  <div>
-                    One
-                  </div>
-                  <svg
-                    class="icon"
-                    style="height: 20px; width: auto; fill: #007bc1;"
-                    viewBox=""
-                    xmlns=""
-                  />
-                </div>
-              </div>
-            </div>
             <input
               name="my-field"
               type="hidden"